一、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>