Jquery EasyUI的Draggable与Droppable插件

迈不过友情╰ 2022-05-09 09:03 207阅读 0赞

中文网帮助文档：[http://www.jeasyui.net/plugins/152.html][http_www.jeasyui.net_plugins_152.html]

**Draggable 与 Droppable 插件： 配合一起使用**

### 一、EasyUI Draggable 可拖动        ###

## 属性 ##

<table> 
 <tbody> 
  <tr> 
   <th>名称</th> 
   <th>类型</th> 
   <th>描述</th> 
   <th>默认值</th> 
  </tr> 
  <tr> 
   <td><span style="color:#f33b45;">proxy</span></td> 
   <td>string,function</td> 
   <td>拖动时要使用的代理元素，设置为 <span style="color:#f33b45;">'clone</span>' 时，克隆元素将被用作代理。如果指定一个函数，它必须返回一个 jQuery 对象。<br> 下面的实例演示了如何创建简单的代理对象。 <pre>
<code>&nbsp;</code></pre> 
    <ol> 
     <li>$('.dragitem').draggable({ </li> 
     <li>proxy: function(source){ </li> 
     <li>var p = $('&lt;div style="border:1px solid #ccc;width:80px"&gt;&lt;/div&gt;');</li> 
     <li>p.html($(source).html()).appendTo('body');</li> 
     <li>return p;</li> 
     <li>}</li> 
     <li>});</li> 
    </ol></td> 
   <td>null</td> 
  </tr> 
  <tr> 
   <td><span style="color:#f33b45;">revert</span></td> 
   <td>boolean</td> 
   <td>如果设置为 true，拖动结束后元素将返回它的开始位置。</td> 
   <td>false</td> 
  </tr> 
  <tr> 
   <td>cursor</td> 
   <td>string</td> 
   <td>拖动时的<span style="color:#3399ea;"> css 光标（cursor）</span>。</td> 
   <td>move</td> 
  </tr> 
  <tr> 
   <td>deltaX</td> 
   <td>number</td> 
   <td>拖动的元素相对于当前光标的 X 轴位置。</td> 
   <td>null</td> 
  </tr> 
  <tr> 
   <td>deltaY</td> 
   <td>number</td> 
   <td>拖动的元素相对于当前光标的 Y 轴位置。</td> 
   <td>null</td> 
  </tr> 
  <tr> 
   <td>handle</td> 
   <td>selector</td> 
   <td>启动可拖动（draggable）的处理（handle）。</td> 
   <td>null</td> 
  </tr> 
  <tr> 
   <td>disabled</td> 
   <td>boolean</td> 
   <td>如果设置为 true，则停止可拖动（draggable）。</td> 
   <td>false</td> 
  </tr> 
  <tr> 
   <td>edge</td> 
   <td>number</td> 
   <td>能够在其中开始可拖动（draggable）的拖动宽度。</td> 
   <td>0</td> 
  </tr> 
  <tr> 
   <td>axis</td> 
   <td>string</td> 
   <td>定义拖动元素可在其上移动的轴，可用的值是 'v' 或 'h'，当设为 null，将会沿着 'v' 和 'h' 的方向移动。</td> 
   <td>null</td> 
  </tr> 
 </tbody> 
</table>

## 事件 ##

<table> 
 <tbody> 
  <tr> 
   <th>名称</th> 
   <th>参数</th> 
   <th>描述</th> 
  </tr> 
  <tr> 
   <td>onBeforeDrag</td> 
   <td>e</td> 
   <td>拖动前触发，返回 false 就取消拖动。</td> 
  </tr> 
  <tr> 
   <td>onStartDrag</td> 
   <td>e</td> 
   <td><span style="color:#f33b45;">目标对象开始拖动时触发</span>。</td> 
  </tr> 
  <tr> 
   <td>onDrag</td> 
   <td>e</td> 
   <td><span style="color:#f33b45;">拖动期间触发</span>。返回 false 将不进行实际的拖动。</td> 
  </tr> 
  <tr> 
   <td>onStopDrag</td> 
   <td>e</td> 
   <td><span style="color:#f33b45;">拖动停止时触发</span>。</td> 
  </tr> 
 </tbody> 
</table>

## 方法 ##

<table> 
 <tbody> 
  <tr> 
   <th>名称</th> 
   <th>参数</th> 
   <th>描述</th> 
  </tr> 
  <tr> 
   <td><span style="color:#f33b45;">options</span></td> 
   <td>none</td> 
   <td>返回选项（options）属性（property）。</td> 
  </tr> 
  <tr> 
   <td>proxy</td> 
   <td>none</td> 
   <td>如果设置了代理（proxy）属性就返回拖动代理（proxy）。</td> 
  </tr> 
  <tr> 
   <td>enable</td> 
   <td>none</td> 
   <td>启用拖动动作。</td> 
  </tr> 
  <tr> 
   <td>disable</td> 
   <td>none</td> 
   <td>禁用拖动动作。</td> 
  </tr> 
 </tbody> 
</table>

使用 JS 创建可拖动（draggable）元素。

**    1、基本拖动：拖拽标题实现可拖动**

<h3>欢迎进入首页</h3>
    	<div id="dg">
    		<div id="title">标题</div>
    		EasyUI Draggable 可拖动
    	</div>
    
    ---index.css--
    @charset "UTF-8";
    #dg{
    	width: 400px;
    	height: 200px;
    	border: 1px solid #000;
    }
    #title{
    	width: 100%;
    	height: 35px;
    	background-color: #ccc;
    }
    
    ---index.js--
    $(function(){
    	$("#dg").draggable({
    		proxy: "clone",
    		handle: "#title",
    		cursor: "move",//pointer
    	});
    });

![70][]

**  2、约束拖动：一个子div只能在其父div里拖拽**

<div id="context">
    		<div id="dg">Draggable 可拖动div</div>
    		父div
    	</div>
    
    --index.css--
    @charset "UTF-8";
    #context{
    	width: 400px;
    	height: 200px;
    	border: 5px solid #abc;
    	margin-left: 50px;
    	position:relative; //父div必须为相对定位
    }
    #dg{
    	width: 80px;
    	height: 80px;
    	border: 3px solid red;
    	background-color: #ccc;
    }
    --index.js--
    $(function(){	
    	$("#dg").draggable({
    		onDrag: function(event){ //拖动期间触发事件
    			var e = event.data;
    			if(e.left < 0){
    				e.left = 0;
    			}
    			if(e.top < 0){
    				e.top = 0;
    			}
    			if (e.left + $(e.target).outerWidth() > $(e.parent).width()){
    				e.left = $(e.parent).width() - $(e.target).outerWidth();
    			}
    			if (e.top + $(e.target).outerHeight() > $(e.parent).height()){
    				e.top = $(e.parent).height() - $(e.target).outerHeight();
    			}
    		}
    	});
    });

![70 1][]

## ##

### 二、EasyUI Droppable 可放置 ###

## 属性 ##

<table> 
 <tbody> 
  <tr> 
   <th>名称</th> 
   <th>类型</th> 
   <th>描述</th> 
   <th>默认值</th> 
  </tr> 
  <tr> 
   <td><span style="color:#f33b45;">accept</span></td> 
   <td>selector</td> 
   <td>确定<span style="color:#3399ea;">将被接受的可拖动元素</span>。</td> 
   <td>null</td> 
  </tr> 
  <tr> 
   <td>disabled</td> 
   <td>boolean</td> 
   <td>如果设置为 true，则停止可放置（droppable）。</td> 
   <td>false</td> 
  </tr> 
 </tbody> 
</table>

## 事件 ##

<table> 
 <tbody> 
  <tr> 
   <th>名称</th> 
   <th>参数</th> 
   <th>描述</th> 
  </tr> 
  <tr> 
   <td>onDragEnter</td> 
   <td>e,<span style="color:#f33b45;">source</span></td> 
   <td><span style="color:#f33b45;">当可拖动元素被拖进来时触发</span>。source 参数指被拖动的 DOM 元素。</td> 
  </tr> 
  <tr> 
   <td>onDragOver</td> 
   <td>e,source</td> 
   <td>当可拖动元素被拖过时触发。source 参数指被拖动的 DOM 元素。</td> 
  </tr> 
  <tr> 
   <td>onDragLeave</td> 
   <td>e,source</td> 
   <td><span style="color:#f33b45;">当可拖动元素被拖离开时触发</span>。source 参数指被拖动的 DOM 元素。</td> 
  </tr> 
  <tr> 
   <td>onDrop</td> 
   <td>e,source</td> 
   <td><span style="color:#f33b45;">当可拖动元素被放下时触发</span>。source 参数指被拖动的 DOM 元素。</td> 
  </tr> 
 </tbody> 
</table>

## 方法 ##

<table> 
 <tbody> 
  <tr> 
   <th>名称</th> 
   <th>参数</th> 
   <th>描述</th> 
  </tr> 
  <tr> 
   <td><span style="color:#f33b45;">options</span></td> 
   <td>none</td> 
   <td>返回选项（options）对象。</td> 
  </tr> 
  <tr> 
   <td>enable</td> 
   <td>none</td> 
   <td>启用可放置功能。</td> 
  </tr> 
  <tr> 
   <td>disable</td> 
   <td>none</td> 
   <td>禁用可放置功能。</td> 
  </tr> 
 </tbody> 
</table>

使用 javascript 创建可放置（droppable）区域。

**1、基本拖拽放置：改变项目排序**

insertAfter() 方法在被选元素之后插入 HTML 标记或已有的元素。

<ul>
    		<li class="drag-item">Drag 1</li>
    		<li class="drag-item">Drag 2</li>
    		<li class="drag-item">Drag 3</li>
    		<li class="drag-item">Drag 4</li>
    		<li class="drag-item">Drag 5</li>
    		<li class="drag-item">Drag 6</li>
    	</ul>
    
    ---index.css--
    @charset "UTF-8";
    ul {
    	margin-left: 10px;
    }
    
    .drag-item {
    	list-style-type: none; /* 设置列表项标记的类型: 无标记。 */
    	display: block;
    	margin: 10px;
    	padding: 5px;
    	border: 1px solid #ccc;
    	width: 300px;
    	background: #fafafa;
    	color: #444;
    	border: 1px solid #ccc;
    	padding: 5px;
    }
    
    .arrows {
    	display: none; /* 通过display来控制箭头元素生成的显示框类型 */
    	position: absolute;
    	font-size: 9px;
    	width: 10px;
    	height: 10px;
    	color: red;
    }
    
    ---index.js--
    $(function(){	
    	var arrows = $("<div class='arrows'>>></div>").appendTo("body");
    	$(".drag-item").draggable({
    		revert: true
    	});
    	$(".drag-item").droppable({
    		onDragOver: function(e,source){
    			arrows.css({
    				display: "block",
    				left: $(this).offset().left - 15,
    				top: $(this).offset().top + $(this).outerHeight()-5
    			});
    		},
    		onDragLeave: function(e,source){
    			arrows.hide();
    		},
    		onDrop: function(e,source){
    			$(source).insertAfter(this);
    			arrows.hide();
    		}
    	});
    
    });

![70 2][]

**2、基本拖拽放置：可互相接收一个拖拽**

拖过去，也可以拖回来，

<div id="source">
    		drag me!
    		<div id="dg1" class="drag">Drag 1</div>
    		<div id="dg2" class="drag">Drag 2</div>
    		<div id="dg3" class="drag">Drag 3</div>
    	</div>
    	<div id="target">
    		drop here!
    	</div>
    
    --index.css--
    @charset "UTF-8";
    #source {
    	border: 1px solid #ccc;
    	width: 200px;
    	height: 300px;
    	float: left;
    	margin: 5px;
    }
    
    #target {
    	width: 200px;
    	height: 300px;
    	float: left;
    	margin: 5px;
    	border: 1px solid #ccc;
    }
    
    .drag {
    	width: 100px;
    	height: 30px;
    	padding: 10px;
    	margin: 5px;
    	border: 1px solid #ccc;
    	background: #AACCFF;
    }
    
    .over {
    	background: #FBEC88;
    }
    .overs {
    	background: #00ff00;
    }
    #dg{
    	width: 80px;
    	height: 80px;
    	border: 3px solid red;
    	background-color: #ccc;
    }
    
    --index.js--
    $(function(){	
    	$(".drag").draggable({
    		proxy: 'clone',
    		revert: true,
    		cursor: 'auto',
    		onStartDrag: function(){ //目标对象开始拖动时触发
    			$(this).draggable('options').cursor='move';
    		},
    		onStopDrag:function(){ //拖动停止时触发
    			$(this).draggable('options').cursor='auto';
    		}
    	});
    	$('#target').droppable({
    		accept:'#dg1,#dg3',
    		onDragEnter:function(e,source){ //当可拖动元素被拖进来时触发
    			$(source).draggable('options').cursor='pointer';
    			$(source).draggable('proxy').css('border','1px solid red');
    			$(this).addClass('over');
    		},
    		onDragLeave:function(e,source){ //当可拖动元素被拖离开时触发
    			$(source).draggable('options').cursor='not-allowed';
    			$(source).draggable('proxy').css('border','1px solid #ccc');
    			$(this).removeClass('over');
    		},
    		onDrop:function(e,source){ //当可拖动元素被放下时触发
    			$(this).append(source)
    			$(this).removeClass('over');
    		}
    	});
    	$('#source').droppable({
    		accept:'#dg1,#dg2,#dg3',
    		onDragEnter:function(e,source){ //当可拖动元素被拖进来时触发
    			$(source).draggable('options').cursor='pointer';
    			$(source).draggable('proxy').css('border','1px solid blue');
    			$(this).addClass('overs');
    		},
    		onDragLeave:function(e,source){ //当可拖动元素被拖离开时触发
    			$(source).draggable('options').cursor='not-allowed';
    			$(source).draggable('proxy').css('border','1px solid #ccc');
    			$(this).removeClass('overs');
    		},
    		onDrop:function(e,source){ //当可拖动元素被放下时触发
    			$(this).append(source)
    			$(this).removeClass('overs');
    		}
    	});
    });

![70 3][]

[http_www.jeasyui.net_plugins_152.html]: http://www.jeasyui.net/plugins/152.html
[70]: /images/20220509/6d8abbf31033469490a2b1c82aaaeb00.png
[70 1]: /images/20220509/8bf811233f5f48e99b3928c61255820a.png
[70 2]: /images/20220509/8a59fc0a7221463bbafb574102eddc7b.png
[70 3]: /images/20220509/543e49530da14a53a80325e1e887d730.png