如何使用jQuery插件EasyDrag实现弹出框任意拖动效果

如何使用jQuery插件EasyDrag实现弹出框任意拖动效果

使用Jquery插件EasyDrag，只需要一行代码就可轻松实现拖动效果.

1.   $(document).ready( function()
2.       {
3.         $(“#divPanel”).easydrag();
4.       }
5.     );

Html 代码

1.   <div id=”divPanel” style=”width:300px;height:300px;background:white;border:1px solid #000000;position:absolute;left:5px;top:50px” >
2.         <div id=”divTitle” style=”width:100%;height:25px;background:lavender”>
3.             Title
4.         </div>
5.         <div style=”width:100%”>
7.         </div>
8.     </div>

EasyDrag还可以指定可拖动的区域，比如只能通过标题拖动整个div，我们JS可以这样写

1.     $(document).ready ( function()
2.             {
3.                 $(“#divPanel”).easydrag();
5.                 $(“#divPanel”).setHandler(“divTitle”);
6.             }
7.         );

一个setHandler搞定,不错开源是个好东西，Jquery更是好东西，插件扩展机制不是一般的好。