接上篇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操作的一些基本操作原理，并且我们希望，在以后的日子，可以就该方面写更多的文章。