draggable用来在界面上创建一个可以拖动的元素,既然是可以拖动的元素,那么它在拖动过程中会有下面的几个事件:onBeforeDrag、onStartDrag、onDrag、onStopDrag。
创建一个拖动元素一般需要两个部分:一个包装层,用来保存在拖动过程的内容;另外一个,是拖动的对象,相当于是水桶把。下面的示例中,拖动#title来改变#db的位置。
<body> <div id="db" style="width: 100px;"> <p id="title" style="background: #ccc;"> draggable</p> <p id="P1"> 1111111111</p> <p id="P2"> 2222222222</p> <p id="P3"> 3333333333</p> </div> <script type="text/javascript"> $(document).ready(function () { $('#db').draggable({ handle: '#title' }); }); </script> </body>
另外,也可以不指定handle属性,那么整个#db都是拖动的。
基本属性
1.handle
拖动元素中,用于拖动的部分。
2.axis
控制拖动方向,如果不指定,那么可以任意拖动。通过, 'v' 或 'h',这两个值,来指定水平或垂直方向上的拖动。
3.cursor
用来指定拖动时,光标的样式,默认是:move
4.revert
如果这个属性值是ture,那么拖动松开后,拖动元素会回到起点。
5.proxy
通过赋值“clone”,拖动时,会创建一个副本。
拖拽限制
<body> <div style="position: relative; overflow: hidden; border: 1px solid #ccc; width: 500px; height: 300px"> <div id="db" style="width: 100px; height: 100px; background: #fafafa; border: 1px solid #ccc;"> </div> </div> <script type="text/javascript"> $(document).ready(function () { $('#db').draggable({ onDrag: function (e) { var d = e.data; if (d.left < 0) { d.left = 0; } if (d.top < 0) { d.top = 0; } if (d.left + $(d.target).outerWidth() > $(d.parent).width()) { d.left = $(d.parent).width() - $(d.target).outerWidth(); } if (d.top + $(d.target).outerHeight() > $(d.parent).height()) { d.top = $(d.parent).height() - $(d.target).outerHeight(); } } }); }); </script> </body>
通过在拖拽事件中获取db和外部层,然后限制top和left。下面在调试中,输出e.data的值。
学校课程表
下面代码运行有个bug,有时拖动结束了,这个元素失去了再次拖动的能力。
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>EasyUI</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8;" /> <link href="easyui/themes/default/easyui.css" rel="stylesheet" type="text/css" /> <link href="easyui/themes/icon.css" rel="stylesheet" type="text/css" /> <script src="easyui/jquery-1.8.0.min.js" type="text/javascript"></script> <script src="easyui/jquery.easyui.min.js" type="text/javascript"></script> <script src="easyui/locale/easyui-lang-zh_CN.js" type="text/javascript"></script> <style type="text/css"> .left{width: 120px;float: left;} .left table{background: #E0ECFF;} .left td{background: #eee;} .right{float: right;width: 570px;} .right table{width: 100%;} .right td{background: #E0ECFF;color: #444;text-align: center;padding: 2px;width: 100px;} .right td.drop{background: #fafafa;width: 100px;} .right td.over{background: #FBEC88;width: 100px;} .item{text-align: center;border: 1px solid #499B33;background: #fafafa;color: #444;width: 100px;} .assigned{border: 1px solid #BC2A4D;} </style> </head> <body> <div style="width: 800px;"> <div class="left"> <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> </table> </div> <div class="right"> <table> <tr> <td></td> <td>星期一</td> <td>星期二</td> <td>星期三</td> <td>星期四</td> <td>星期五</td> </tr> <tr> <td>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>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>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>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>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>13:00 </td> <td colspan="5">午餐时间 </td> </tr> <tr> <td>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>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>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> <script type="text/javascript"> $(function () { $('.left .item').draggable({ revert: true, proxy: 'clone' }); //可拽入容器 $('.right td.drop').droppable({ onDragEnter: function () { $(this).addClass('over'); }, onDragLeave: function () { $(this).removeClass('over'); }, onDrop: function (e, source) { $(this).removeClass('over'); if ($(source).hasClass('assigned')) { //如果有红色的边框,表示是已经在课表中的课程 $(this).empty().append(source); } else { //没有红色边框,是从左侧源中拖出的,要创建一个副本 var c = $(source).clone().addClass('assigned'); $(this).empty().append(c); //这个副本也是可以拖动的 c.draggable({ revert: true, onStopDrag: function (e) { //停止拖动的时候,如果在表格之外,则删除这个对象 var d = e.data; var thisF = d.left; var thisT = d.top; var tableF = $(".right table").offset().left; var tableW = $(".right table").width(); var tableT = $(".right table").offset().top; var tableH = $(".right table").height(); if (thisF < tableF || thisF > tableF + tableW || thisT < tableT || thisT > tableT + tableH) { $(this).remove(); } } }); } } }); }); </script> </body> </html>