easyUI draggable组件使用：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="easyui/jquery.min.js"></script> <script src="easyui/jquery.easyui.min.js"></script> <script src="easyui/locale/easyui-lang-zh_CN.js"></script> <script src="js/test003.js"></script> <link rel="stylesheet" href="easyui/themes/default/easyui.css"> <link rel="stylesheet" href="easyui/themes/icon.css"> </head> <body> <div id="box1" class="easyui-draggable" style="background:#ccc;300px;height:200px">this is draggable</div> <div id="box" style="background:#eee;300px;height:200px"><div id="pox">title</div>this is JS draggable</div> </body> </html>
$(function(argument) { var obj = { //revert:true,//true表示返回初始位置 //cursor:'text',//鼠标在移动过程中的样子 //handle:'#pox',//能拖动的部分，一般是在里面的title层 //disabled:true,//禁止拖动了； //edge:10,//禁止拖动的边宽度； //axis:'h',//v-只能竖直拖动，h-只能水平拖动 proxy: 'clone', //拖动过程中克隆一个对象 //deltaX:10,//拖动的物体其相对于鼠标的x偏移量,与proxy结合使用 //deltaY:10,//拖动的物体其相对于鼠标的y偏移量,与Proxy结合使用 // proxy:function (source) { // console.log(source);// source是拖动的HTML对象； // var p = $('<div style="border:1px solid #ccc;80px"></div>'); // p.html($(source).html()).appendTo('body'); // return p;// p是生成出来的对象，拖着走的那个； // }, onBeforeDrag: function(e) { //对应mousedown事件 console.log('onBeforeDrag'); console.log(e); //return false;//将取消拖动； }, onStartDrag: function(e) { //对应mousedown事件 console.log('onStartDrag'); console.log(e); }, onDrag: function(e) { //对应mousemove和mouseup事件 // console.log('onDrag'); // console.log(e); //return false;//拖不动了，但是能到达目标位置； //console.log($('#box').draggable('options'));//获得options属性 //console.log($('#box').draggable('proxy'));//获得proxy对象； //$('#box').draggable('disable');//！！不能这样写，会崩溃的； }, onStopDrag: function(e) { //对应mouseup事件 console.log('onStopDrag'); console.log(e); } }; $('#box').draggable(obj);
$('#box').draggable('disable'); // 有效果呀！
});