五步掌握Ext的拖放（下）

Posted 周三, 05/19/2010 - 11:30 by admin

September 13, 2009 by Jay Garcia 翻译：frank

第三步：设置置下目标明确需求是怎么样的：除了 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框架中很多组件都可以使用拖放，总之不一而足。通过下面不同的例子来继续进一步深化拖放操作的学习（官方的）：