jQuery EasyUI Draggable拖动组件

2019-11-19 17:23:07

字体：大中小

来源：转载

供稿：网友

上文已经提到过了jQuery EasyUI插件引用一般我们常用的有两种方式（排除easyload加载方式），所以本篇要总结的Draggable组件同样有两种方式加载：

（1）、使用class加载方式：

<div id="box" class="easyui-draggable" style="width:400px;height:200px;background:red;">内容部分</div>

（2）、JS 加载调用

$('#box').draggable();

同样上文也说了，使用class属性不利于我们拓展组件的其他属性，所以我们使用JS调用的方式，后面的文章也是使用JS调用的方式。

该组件有若干属性、方法及触发事件，不在这里列举了，都放到代码示例里并且加上注释了。
示例：

<!DOCTYPE html> <html> <head> <title>jQuery Easy UI</title> <meta charset="UTF-8" /> <script type="text/javascript" src="easyui/jquery.min.js"></script> <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script> <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js" ></script> <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css" rel="external nofollow" /> <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css" rel="external nofollow" /> <script>   $(function () {   $.fn.draggable.defaults.cursor = 'text';//*****采用这种方式重写默认值    $('#box').draggable({     //revert : true,  默认值为false 设置为true的时候拖动结束后返回起始位置     //cursor : 'text', 定义拖动时指针的样式     //handle : '#pox', 开始拖动时的句柄,就是点击哪里可以拖动，参数是一个JQ选择器     //disabled : true, 设置为true的时候,禁止拖动     //edge : 0,      //axis : 'v',    不写：任意拖动 值为v：垂直拖动  值为h：水平拖动     //proxy : 'clone', 当使用'clone'的时候则克隆一个替代元素拖动，如果指定一个函数，则可以自定义替代元素。     deltaX : 50,//被拖动元素对应于当前光标位置X     deltaY : 50,//被拖动元素对应于当前光标位置Y     proxy : function (source) {       var p = $('<div style="width:400px;height:200px;border:1px dashed #ccc">');       p.html($(source).html()).appendTo('body');       return p;     }     /**     可触发的事件：          onBeforeDrag : function (e) {       alert('拖动前触发！');     },     onBeforeDrag : function (e) {       //return false;     },     onStartDrag : function (e) {       alert('拖动开始触发！');       console.log($('#box').draggable('proxy'));     },     onDrag : function (e) {       //alert('拖动过程触发！');     },     onStopDrag : function (e) {       alert('拖动结束后触发！');     }     */             });      //$('#box').draggable('disable');//禁止拖动      //$('#box').draggable('enable');//可以拖动    //alert($('#box').draggable('options'));  //返回对象属性    });  </script> </head> <body>   <div id="box" style="width:400px;height:200px;background:orange;">     <span id="pox">内容部分</span>   </div> </body> </html>

点击下载源代码：jQuery EasyUI Draggable拖动组件

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：浅谈js for循环输出i为同一值的问题

下一篇：Angular.js之作用域scope'@','=','&'实例详解