一、EasyUI 基本的拖動和放置
直接代碼看：
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="keywords" content="jquery,ui,easy,easyui,web">
<meta name="description" content="easyui help you build your web page easily!">
<title>6、easyui 拖放</title>
<link rel="stylesheet" type="text/css" href="../../../ui/jquery-easyui-1.4.5/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../../ui/jquery-easyui-1.4.5/themes/icon.css">
<link rel="stylesheet" type="text/css" href="../../../ui/jquery-easyui-1.4.5/themes/color.css">
<script src="../../../ui/jquery-easyui-1.4.5/jquery.min.js"></script>
<script src="../../../ui/jquery-easyui-1.4.5/jquery.easyui.min.js"></script>
<script src="../../../ui/jquery-easyui-1.4.5/locale/easyui-lang-zh_CN.js"></script>
<script>
$(function(){
$("#dd1").draggable({
cursor:'pointer'//拖動時的CSS指針樣式。
});
$("#dd2").draggable({
proxy:'clone'
});
$("#dd3").draggable({
proxy:function(source){
var p = $('<div class="proxy">proxy</div>');
p.appendTo('body');
return p;
}
});
$('#dds').draggable({
handle:'#titles' //開始拖動的句柄。
});
});
</script>
</head>
<body>
<div id="dd1">class="easyui-draggable" data-options="handle:'#title'"><!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="keywords" content="jquery,ui,easy,easyui,web">
<meta name="description" content="easyui help you build your web page easily!">
<title>6-1、easyui 購物車</title>
<link rel="stylesheet" type="text/css" href="../../../ui/jquery-easyui-1.4.5/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../../ui/jquery-easyui-1.4.5/themes/icon.css">
<link rel="stylesheet" type="text/css" href="../../../ui/jquery-easyui-1.4.5/themes/color.css">
<script src="../../../ui/jquery-easyui-1.4.5/jquery.min.js"></script>
<script src="../../../ui/jquery-easyui-1.4.5/jquery.easyui.min.js"></script>
<script src="../../../ui/jquery-easyui-1.4.5/locale/easyui-lang-zh_CN.js"></script>
<style>
/*開始 第二步 設置拖動區樣式*/
.products{
list-style:none;
margin-right:700px;
padding:0px;
height:100%;
}
.products li{
display:inline;
float:left;
margin:10px;
}
.item{
display:block;
text-decoration:none;
}
.item img{
border:1px solid #333;
}
.item p{
margin:0;
font-weight:bold;
text-align:center;
color:#c3c3c3;
}
/*結束 第二步 設置拖動區樣式*/
/*開始 第四步 設置放置區樣式*/
.cart{
position:fixed;
right:0;
top:0;
min-width:500px;
height:100%;
background:#ccc;
padding:0px 10px;
}
h1{
text-align:center;
color:#555;
}
h2{
position:absolute;
font-size:16px;
left:10px;
bottom:20px;
color:#555;
}
.total{
margin:0;
text-align:right;
padding-right:20px;
}
/*結束 第四步 設置放置區樣式*/
</style>
<script>
var data = {"total":0,"rows":[]};
var totalCost = 0;
$(function(){
/**開始 第五步 設置放置區中table的屬性及樣式**/
$('#cartcontent').datagrid({//這段代碼可以直接寫在頁面上 設置table clas="easyUI-datagrid" singleSelect="true" fitColumns="true"
singleSelect:true, //表格屬性 如果為true，則只允許選擇一行 不設置可以選擇多行
//fitColumns:true,//真正的自動展開/收縮列的大小，以適應網格的寬度，防止水平滾動。
//同列屬性，但是這些列將會被凍結在左側。
frozenColumns:[[
{field:'name',title:'name',width:100}
]] ,
//設置表頭
columns:[[
{field:'quantity',title:'quantity',width:100,align:'right'},
{field:'price',title:'price',width:150,align:'right'} ,
{field:'mark',title:'mark',width:150,align:'right'} ,
{field:'mark2',title:'mark2',width:150,align:'right'}
]] ,
////調整列的位置，可用的值有：'left','right','both'。在使用'right'的時候用戶可以通過拖動右側邊緣的列標題調整列 默認為right
resizeHandle:'both',
// striped:true,//默認是false 顯示斑馬線效果
rownumbers:true//顯示一個行號默認不顯示。
});
/**結束 第五步 設置放置區中table的屬性及樣式**/
/**開始 第六步 設置拖動區的效果以及觸發事件**/
//拖動設置
$('.item').draggable({
revert:true,//如果設置為true，在拖動停止時元素將返回起始位置。默認為false
proxy:'clone',//在拖動的時候使用的代理元素，當使用'clone'的時候，將使用該元素的一個復制元素來作為替代元素
// 事件
onStartDrag:function(){//在目標對象開始被拖動時觸發。
$(this).draggable('options').cursor = 'not-allowed';//設置被拖動時不允許再選中
$(this).draggable('proxy').css('z-index',10);//攝者克隆後的屬性
},
// 事件
onStopDrag:function(){//在拖動停止時觸發。
$(this).draggable('options').cursor='move';//設置鼠標屬性為拖動形狀
}
});
/**結束 第六步 設置拖動區的效果以及觸發事件**/
/**開始 第七步 設置放置區的效果以及觸發事件**/
//放置
$('.cart').droppable({//設置在div的class屬性為cart的區域內都被視為放置區
//在被拖拽元素到放置區內的時候觸發，source參數表示被拖拽的DOM元素。
onDragEnter:function(e,source){
$(source).draggable('options').cursor='auto';//設置拖動的鼠標樣式
},
//在被拖拽元素經過放置區的時候觸發，source參數表示被拖拽的DOM元素
onDragOver:function(e,source){
$('.cart').css("background","#0088CC");//設置放置區背景色
},
//在被拖拽元素離開放置區的時候觸發，source參數表示被拖拽的DOM元素。
onDragLeave:function(e,source){
$(source).draggable('options').cursor='not-allowed';//設置拖動的鼠標樣式
$('.cart').css("background","#CCC");//設置拖動的離開放置區，放置區的背景色
},
//在被拖拽元素放入到放置區的時候觸發，source參數表示被拖拽的DOM元素。
onDrop:function(e,source){
var name = $(source).find('p:eq(0)').html();//獲取商品名稱
var price = $(source).find('p:eq(1)').html();//獲取商品價格
addProduct(name, parseFloat(price.split('$')[1]));//調用添加商品方法
$('.cart').css("background","#CCC");//設置放入到放置區，放置區的背景色
}
});
/**結束 第七步 設置放置區的效果以及觸發事件**/
});
//最後 添加物品方法函數
function addProduct(name,price){
function add(){
for(var i=0; i<data.total; i++){
var row = data.rows[i];
if (row.name == name){
row.quantity += 1;
return;
}
}
data.total += 1;
data.rows.push({
name:name,
quantity:1,
price:price
});
}
add();
totalCost += price;
$('#cartcontent').datagrid('loadData', data);
$('div.cart .total').html('Total: $'+totalCost);
}
</script>
</head>
<body>class="products">
<li>
<a href="#" class="item">
<img src="../../../img/shirt1.gif"/>
<div>
<p>Balloon</p>
<p>Price:$25</p>
</div>
</a>
</li>
<li>
<a href="#" class="item">
<img src="../../../img/shirt2.gif"/>
<div>
<p>Feeling</p>
<p>Price:$25</p>
</div>
</a>
</li>
<li>
<a href="#" class="item">
<img src="../../../img/shirt3.gif"/>
<div>
<p>Elephant</p>
<p>Price:$25</p>
</div>
</a>
</li>
<li>
<a href="#" class="item">
<img src="../../../img/shirt4.gif"/>
<div>
<p>Stamps</p>
<p>Price:$25</p>
</div>
</a>
</li>
<li>
<a href="#" class="item">
<img src="../../../img/shirt5.gif"/>
<div>
<p>Monogram</p>
<p>Price:$25</p>
</div>
</a>
</li>
<li>
<a href="#" class="item">
<img src="../../../img/shirt6.gif"/>
<div>
<p>Rolling</p>
<p>Price:$25</p>
</div>
</a>
</li>
</ul>
<!--結束 第一步 拖動區設置-->
<!--開始 第三步 設置放置區table及區域-->
<div class="cart">
<h1>Shopping Cart</h1>
<div>class="total">Total: $0</p>
<h2>Drop here to add to cart</h2>
</div>
<!--結束 第三步 設置放置區table及區域-->
</body>
</html>
三、課程表
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="keywords" content="jquery,ui,easy,easyui,web">
<meta name="description" content="easyui help you build your web page easily!">
<title>6-2、easyui 課程表</title>
<link rel="stylesheet" type="text/css" href="../../../ui/jquery-easyui-1.4.5/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../../ui/jquery-easyui-1.4.5/themes/icon.css">
<link rel="stylesheet" type="text/css" href="../../../ui/jquery-easyui-1.4.5/themes/color.css">
<script src="../../../ui/jquery-easyui-1.4.5/jquery.min.js"></script>
<script src="../../../ui/jquery-easyui-1.4.5/jquery.easyui.min.js"></script>
<script src="../../../ui/jquery-easyui-1.4.5/locale/easyui-lang-zh_CN.js"></script>
<style>
.dragraera{
width: 120px;
float: left;
}
.dragraera table{
background:#E0ECFF;
}
.dragraera td{
background:#eee;
}
.item{
text-align:center;
border:1px solid #499B33;
background:#fafafa;
width:100px;
}
.right{
float:right;
width:600px;
}
.right table{
background:#E0ECFF;
width:100%;
}
.right td{
background:#fafafa;
text-align:center;
padding:2px;
}
.right td{
background:#E0ECFF;
}
.right td.drop{
background:#fafafa;
width:100px;
}
.right td.over{
background:#FBEC88;
}
.assigned{
border:1px solid #BC2A4D;
}
</style>
<script>
$(function(){
$(".dragraera .item").draggable({
revert:true,
proxy:'clone'
});
$(".right .drop").droppable({
onDragEnter:function(){
$(this).addClass('over');
},
onDragLeave:function(){
$(this).removeClass('over');
},
onDrop:function(e,source){
$(this).removeClass('over');
if ($(source).hasClass('assigned')){
$(this).append(source);
} else {
var c = $(source).clone().addClass('assigned');
$(this).empty().append(c);
c.draggable({
revert:true
});
}
}
});
});
</script>
</head>
<body>class="dragraera">
<table>
<tr><td><div class="item">語文</div></td></tr>
<tr><td><div class="item">數學</div></td></tr>
<tr><td><div class="item">英語</div></td></tr>
<tr><td><div class="item">物理</div></td></tr>
<tr><td><div class="item">化學</div></td></tr>
<tr><td><div class="item">生物</div></td></tr>
<tr><td><div class="item">政治</div></td></tr>
<tr><td><div class="item">歷史</div></td></tr>
<tr><td><div class="item">地理</div></td></tr>
</table>
</div>
<div class="right">
<table>
<tr>
<td class="blank"></td>
<td class="title">Monday</td>
<td class="title">Tuesday</td>
<td class="title">Wednesday</td>
<td class="title">Thursday</td>
<td class="title">Friday</td>
</tr>
<tr>
<td class="time">08:00</td>
<td class="drop"></td>
<td class="drop"></td>
<td class="drop"></td>
<td class="drop"></td>
<td class="drop"></td>
</tr>
<tr>
<td class="time">09:00</td>
<td class="drop"></td>
<td class="drop"></td>
<td class="drop"></td>
<td class="drop"></td>
<td class="drop"></td>
</tr>
<tr>
<td class="time">10:00</td>
<td class="drop"></td>
<td class="drop"></td>
<td class="drop"></td>
<td class="drop"></td>
<td class="drop"></td>
</tr>
<tr>
<td class="time">11:00</td>
<td class="drop"></td>
<td class="drop"></td>
<td class="drop"></td>
<td class="drop"></td>
<td class="drop"></td>
</tr>
<tr>
<td class="time">12:00</td>
<td class="drop"></td>
<td class="drop"></td>
<td class="drop"></td>
<td class="drop"></td>
<td class="drop"></td>
</tr>
<tr>
<td class="time">13:00</td>
<td class="lunch" colspan="5">Lunch</td>
</tr>
<tr>
<td class="time">14:00</td>
<td class="drop"></td>
<td class="drop"></td>
<td class="drop"></td>
<td class="drop"></td>
<td class="drop"></td>
</tr>
<tr>
<td class="time">15:00</td>
<td class="drop"></td>
<td class="drop"></td>
<td class="drop"></td>
<td class="drop"></td>
<td class="drop"></td>
</tr>
<tr>
<td class="time">16:00</td>
<td class="drop"></td>
<td class="drop"></td>
<td class="drop"></td>
<td class="drop"></td>
<td class="drop"></td>
</tr>
</table>
</div>
</div>
</body>
</html>
