上文已经提到过了jQuery EasyUI插件引用一般我们常用的有两种方式(排除easyload加载方式),所以本篇要总结的Draggable组件同样有两种方式加载:
(1)、使用class加载方式:
<div id="box" class="easyui-draggable" > 内容部分 </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 >'); 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" > <span id="pox">内容部分</span> </div> </body> </html>
点击下载源代码:jQuery EasyUI Draggable拖动组件
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持亿速云。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。