五步掌握Ext的拖放（下）

接上篇URL：http://blog.csdn.net/zhangxin09/archive/2010/05/03/5551665.aspx 。

第三步：设置置下目标

明确需求是怎么样的：除了 rented 和repair 可接纳拖动元素，cars和trucks本身也是可以的。总之是使用 DDTarget 来负责放下的目标。代码如下：

//Instantiate instances of Ext.dd.DDTarget for the cars and trucks container var carsDDTarget = new Ext.dd.DDTarget('cars','carsDDGroup'); var trucksDDTarget = new Ext.dd.DDTarget('trucks', 'trucksDDGroup'); //Instantiate instnaces of DDTarget for the rented and repair drop target elements var rentedDDTarget = new Ext.dd.DDTarget('rented', 'carsDDGroup'); var repairDDTarget = new Ext.dd.DDTarget('repair', 'carsDDGroup'); //Ensure that the rented and repair DDTargets will participate in the trucksDDGroup rentedDDTarget.addToGroup('trucksDDGroup'); repairDDTarget.addToGroup('trucksDDGroup');

上述代码中，为 cars 、trucks、 rented 和repair 设置了置下目标。注意cars 容器的元素只能参与“carsDDGroup”的拖动，trucks 容器的元素只能参与“trucksDDGroup”的拖动。接着是rented 和 repair 的DDTarget 设置，这里有构造器的定义carsDDGroup，也有addToGroup方法加入的trucksDDGroup，两种途径皆可。

OK，已经设置好置下目标了。下面是有效置下后的结果。

点击图片 打开演示。

我们看见这些拖动元素的确是成功到达目的地，可是图片摆放的乱七八糟，还是要整理一下才行，也就是继续所说的“完成置下complete drop”的这一步骤。同样也是重写DD 实例的方法。

第四步：完成置放

实质是用DOM方法把始发点的元素改换到目标父级元素上。重写下面的onDragDrop 方法。

// 拖放过程成功了就执行该方法e onDragDrop : function(evtObj, targetElId) { // 建立置下目标的Ext.Element实例 var dropEl = Ext.get(targetElId); // 不在同一drop区域里面的才算完成drop。同一个target目标没意义。 if (this.el.dom.parentNode.id != targetElId) { // 移动元素 dropEl.appendChild(this.el); // Remove the drag invitation this.onDragOut(evtObj, targetElId); // 清除样式 this.el.dom.style.position =''; this.el.dom.style.top = ''; this.el.dom.style.left = ''; } else { // 无效的drop this.onInvalidDrop(); }

不在同一drop区域里面的才算完成投放置下。同一个target目标没意义，视作无效drop，故执行onInvalidDrop。

 

点击以上图片 观看完整的置下操作。

只要可以成功置下，父级元素辖下的元素就不复存在，移动到置下目标上。

如果拖动的时候进入了有效地目标范围内，用户是不是应该给予他们一点提示呢？下面的就是一个drop邀请，就是告诉用户您快来吧，可以置下喽。

第五步：加入邀请置下（drop invitation）

如上述，此时此刻我们重写的是 onDragEnter 以及 onDragOut 方法。

// Only called when the drag element is dragged over the a drop target with the same ddgroup onDragEnter : function(evtObj, targetElId) { // 添加CSS颜色 if (targetElId != this.el.dom.parentNode.id) { this.el.addClass('dropOK'); } else { // 移除邀请 this.onDragOut(); } }, // 当离开拖动范围的时候触发 onDragOut : function(evtObj, targetElId) { this.el.removeClass('dropOK'); }

当然了，onDragEnter 以及 onDragOut 只会在同一个DD组里面的交互才会生效。

onDragEnter 方法在鼠标指针刚刚碰到置下区域其边缘的时候就会触发，反之，onDragOut 方法就是离开边缘的时候就会立刻触发。

 

点击以上的图片 演示drop邀请。

通过演示，我们可以看进入可投下的区域的时候就会高亮的现实效果（周围是绿色的），离开该一区域就不会显示。

继续阅读

Ext JS框架中很多组件都可以使用拖放，总之不一而足。通过下面不同的例子来继续进一步深化拖放操作的学习（官方的）：

• GridPanel to GridPanel
• Grid to FormPanel
• Ext.form.Field to GridPanel cell
• Use of DragZone and DropZone
• DataView to TreePanel

摘要

今天的学习过程中，我们了解了怎么使用最底层的拖放类实现来进行DOM节点的完整拖放。希望阁下能收获到DD操作的一些基本操作原理，并且我们希望，在以后的日子，可以就该方面写更多的文章。