Question

我是Ext JS的新手，我想更多地了解拖放是如何工作的。所以我在查看http://www.codeslower.com/2011/7/Using-the-draggable-property-in-ExtJS上的文章。我写了一个基于此的JS Fiddle，它位于http://jsfiddle.net/F2xsM/，根据示例使用Ext JS 4.0.7。如果我交换Ext JS 4.1.0或更高版本（例如JS Fiddle - http://jsfiddle.net/HpPhy/和4.2.0），代码将无法正常工作。只有第一个拖动工作。之后，控制台中出现了大量错误。

以下是代码：

Ext.onReady(function() {
    Ext.create('Ext.container.Viewport', {
        layout: 'vbox',
        items: [{
            xtype: 'panel',
            title: 'Drop a Panel Here',
            listeners: { render: initializeDropTarget },
            cls: 'x-dd-drop-ok',
            layout: {
                type: 'vbox',
                stretch: 'align'
            },
            width: 300,
            height: 300
        }, {
            xtype: 'panel',
            title: 'Drag This Panel',
            draggable: true,
            bodyCls: 'green-body',
            width: 300,
            height: 100
        }, {
            xtype: 'panel',
            title: 'Drag This Panel',
            draggable: true,
            bodyCls: 'blue-body',
            width: 300,
            height: 100
        }, {
            xtype: 'panel',
            title: 'Drag This Panel',
            draggable: true,
            bodyCls: 'red-body',
            width: 300,
            height: 100
        }]
    });
});

/**
 Initialize the DropTarget object associated
 with our panel. The 'cmp' argument will be
 the panel (a Component object).
 */
function initializeDropTarget(targetPanel) {
    // Create the DropTarget object and assign it to the panel. Does not
    // have to be assigned to the panel but needs to be assigned to something,
    // or it will get garbage-collected too soon.
    targetPanel.dropTarget = Ext.create('Ext.dd.DropTarget', targetPanel.el);

    // Called once, when dragged item is dropped in the target area. Return false
    // to indicate an invalid drop. DO NOT MODIFY the UI in
    // this function. Use afterDragDrop and the data object.
    targetPanel.dropTarget.notifyDrop = function(source, evt, data) {
        if(typeof console != "undefined")
            console.log("notifyDrop:" + source.id);

        // The component that was dropped.
        var droppedPanel = Ext.getCmp(source.id);

        // We can't modify the component that was dropped in this
        // function. However, we can add an event handler on the component
        // that will be called shortly.
        //
        // In the handler we clone the component (not strictly necessary, we could
        // do that here) and then remove our old component.
        droppedPanel.dd.afterValidDrop = function() {
            targetPanel.add(droppedPanel.cloneConfig({
                draggable: false,
                title: "Can't Drag This Panel."
            }));

            droppedPanel.destroy();
        };

        return true;
    };

    // Called once, when dragged item enters drop area.
    targetPanel.dropTarget.notifyEnter = function(source, evt, data) {
        if(typeof console != "undefined")
            console.log("notifyEnter:" + source.id);

        return this.callParent(Array.prototype.slice.call(arguments));
    };

    // Called once, when dragged item leaves drop area.
    targetPanel.dropTarget.notifyOut = function(source, evt, data) {
        if(typeof console != "undefined")
            console.log("notifyOut:" + source.id);

        return this.callParent(Array.prototype.slice.call(arguments));
    };

    // Called for each mouse movement as dragged item is over the drop area.
    targetPanel.dropTarget.notifyOver = function(source, evt, data) {
        if(typeof console != "undefined")
            console.log("notifyOver:" + source.id);

        return this.callParent(Array.prototype.slice.call(arguments));
    };
}

我需要更改以解决此问题？

更新：我可以看到它与鬼元素和行droppedPanel.destroy();

有关

Answer 1

在notifyDrop之后的某处显然使用了丢弃的面板（当抛出异常时，您可以在堆栈跟踪stopDrag方法中看到）。

最简单的解决方法是延迟destroy来电或使用endDrag回调：

droppedPanel.dd.endDrag = function() {
    droppedPanel.destroy();
};

工作样本：http://jsfiddle.net/HpPhy/4/

拖放代码适用于Ext JS 4.0.7但不适用于更高版本

1 个答案: