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;width:300px;height:200px">this is draggable</div>
<div id="box" style="background:#eee;width: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;width: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‘); //好像没有效果呀！
时间： 2024-11-01 12:14:00