easyui-draggable的拖动组件还是比较好用的，它能够快速地实现网页中元素的拖动效果
实现easyui-draggable拖动组件有两种方式：纯HTML方式和JS方式
纯HTML方式实现拖动组件
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script type="text/javascript" src="../easyui/jquery.min.js"></script> <script type="text/javascript" src="../easyui/jquery.easyui.min.js"></script> <link type="text/css" rel="stylesheet" href="../easyui/themes/default/easyui.css"> <link type="text/css" rel="stylesheet" href="../easyui/themes/icon.css"> <script type="text/javascript" src="../easyui/locale/easyui-lang-zh_CN.js"></script> <style type="text/css"> div { background: #E8F2FE; border: 2px solid black; width: 200px; height: 200px; } </style> </head> <body> <div class="easyui-draggable"></div> </body> </html>
JS方式实现拖动组件
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script type="text/javascript" src="../easyui/jquery.min.js"></script> <script type="text/javascript" src="../easyui/jquery.easyui.min.js"></script> <link type="text/css" rel="stylesheet" href="../easyui/themes/default/easyui.css"> <link type="text/css" rel="stylesheet" href="../easyui/themes/icon.css"> <script type="text/javascript" src="../easyui/locale/easyui-lang-zh_CN.js"></script> <style type="text/css"> div { background: #E8F2FE; border: 2px solid black; width: 200px; height: 200px; } </style> <script type="text/javascript"> $(function() { $("#d01").draggable({ onBeforeDrag: function(e) { console.log("在拖动之前触发，返回false将取消拖动"); } }); }); </script> </head> <body> <div id="d01"></div> </body> </html>