一、EasyUI 基本的拖動和放置 直接代碼看： 二、購物車 三、課程表 ...
一、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" style="background: red;width:100px;height: 100px;" title="hhhh"></div>
<!--revert="true" 如果設置為true，在拖動停止時元素將返回起始位置。-->
<div id="dd2" style="background: black;width:100px;height: 100px;" revert="true"></div>
<div id="dd3" style="background: grey;width:100px;height: 100px;"></div>
<div id="dd" class="easyui-draggable" data-options="handle:'#title'" style="width:100px;height:100px;">
<div id="title" style="background:#ccc;">title</div>
</div>
<div id="dds" style="width:100px;height:100px;">
<div id="titles" style="background:#ccc;">title</div>
</div>
<a style="cursor: move;">2222</a>
</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-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 style="margin:0;padding:0;height:100%;background:#fafafa;">
<!--開始 第一步 拖動區設置-->
<ul 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 style="background:#fff">
<table id="cartcontent">
<thead>
<!--<tr>
<th field="name" width=140>Name</th>
<th field="quantity" width=60 align="right">Quantity</th>
<th field="price" width=60 align="right">Price</th>
</tr>-->
</thead>
</table>
</div>
<p class="total">Total: $0</p>
<h2>Drop here to add to cart</h2>
</div>
<!--結束 第三步 設置放置區table及區域-->
</body>
</html>
