EasyUI的拖动及放置组件

标签：jquery   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');
})

$(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({
		
	});//实现拖动
})

EasyUI的拖动及放置组件

标签：jquery   easyui   拖动   放置   

原文地址：http://blog.csdn.net/mycodedream/article/details/45008273