EasyUI的拖动及放置组件

简单的说，拖动就是利用了easyUI的一个内部组件：Draggable 而放置用了：droppable

然后我们再去利用其自身的属性，方法，行为等对其进行特别的指定，所以，不是简简单单的拖动实现就可以了，还是熟悉使用其自身属性。

下面是实例代码：（我全部都加上了注释，如果测试，打开注释就可以）

$(function(){
$("#box").draggable({
//revert: true,//拖动完返回初始位置
// cursor : 'text',//拖动时样式
// handle: '#box1',
// disabled: true,//停止拖动
// edge: 20,//拖动容器的宽度
// axis: 'v',//限制拖动方向，h为水平，v为竖直
// proxy: 'clone',//克隆一个元素
// deltaX: 10,//
// deltaY: 50,//都是光标位置
//拖动一个元素的虚框，然后跟进
// proxy: function(source){
// 	var p=$('<div style="width: 300px; height: 300px; border: 1px dashed #ccc"></div>');
// 	p.html($(source).html()).appendTo('body');
// 	return p;
// }
//拖动前
// onBeforeDrag: function(e){
// 	alert("你想要拖动");
// }
// onBeforeDrag: function(e){
// 	return false;
// }
//拖动过程
// onDrag:function(e){
// 	alert('拖动过程');
// }
//拖动结束
// onStopDrag: function (e){
// 	alert("拖动完成");
// }

});//实现拖动
//
$("#box").draggable('disable');
$("#box").draggable('enable');
})

不仅如此，easyUI还有拖动放入容器的功能：

$(function(){
$("#box1").droppable({
accept: '#box2',//接收的元素指定
//disabled: true,
/*onDragEnter: function(e,source){//放入开始的函数
//console.log(source);
$(this).css('background','red');//改变自身背景
alert("开始放入");
},
onDragOver: function (e,source){//这放入过程的函数
$(this).css('background-color','black');
},
onDragLeave: function (e,source){//这离开过程的函数
$(this).css('background-color','green');
},*/
/*onDrop: function (e,source){//这放入然后松开鼠标的函数
$(this).css('background-color','blue');
},*/

});

$("#box2").draggable({

});//实现拖动
})

这些只是部分属性方法，具体的属性方法可以取参考一下手册。