Question

我有这样的树（ExtJS 6）：

Root
 |____ Folder 1
 |        |____ Leaf A       
 |        |____ Leaf B       
 |____ Folder 2

现在我需要将任何Leaf X拖到任何文件夹，但不能将其作为Root子项删除。规则是：Leaf必须在Folder内。

这是我的弱功夫：

My TreePanel控制器：

Ext.define('MCLM.view.datawindow.ConfigDataPanelsTreeController', {
    extend: 'Ext.app.ViewController',
    alias: 'controller.configDataPanelsTreeController',

    viewready: function (tree) {

        var view = tree.getView();
        var dd = view.findPlugin('treeviewdragdrop');

        dd.dragZone.onBeforeDrag = function (data, e) {
            var rec = view.getRecord( e.getTarget( view.itemSelector ) );
            // Will not drag folders !
            return rec.isLeaf();
        };

        dd.dragZone.onDragOver = function(e, id) {
            var rec = view.getRecord( e.getTarget( view.itemSelector ) );
            // I know what I'm over but can't deny the drop
        };

    },
});

My TreePanel（只保留重要部分）：

Ext.define('MCLM.view.datawindow.ConfigDataPanelsTree', {
    extend: 'Ext.tree.TreePanel',
    xtype: 'view.configDataPanelsTree',
    id: 'configDataPanelsTree',

    requires: [
       'MCLM.view.datawindow.ConfigDataPanelsTreeController'
    ],     
    controller : 'configDataPanelsTreeController',


    viewConfig: {

        id:'configDataPanelsView',
        plugins: {
            ptype: 'treeviewdragdrop'
        },
        listeners: {   
            beforedrop: function(node, data, overModel, dropPosition, dropHandlers) {

                dropHandlers.wait = true;
                // I know where I will drop, but when droping inside an EMPTY FOLDER, 
                // is like I'm droping at root level - There is no way to know I'm droping at 
                // root level.
                dropHandlers.processDrop();

            },

            drop: function (node, data, overModel, dropPosition) {
                // Already dropped .. what can I do?
            },
        } 
    },        

    listeners: {
         viewready: 'viewready',
    }

});

Answer 1

嗯......这是我的第一次尝试，似乎没问题。

首先将tempParent : null, viewConfig: { markDirty:false, id:'configDataPanelsView', plugins: { ptype: 'treeviewdragdrop' }, listeners: { beforedrop: function(node, data, overModel, dropPosition, dropHandlers) { dropHandlers.wait = true; console.log( "FROM : " + data.records[0].parentNode.data.text ); // Store the node's current parent node var configDataPanelsTree = Ext.getCmp('configDataPanelsTree'); configDataPanelsTree.tempParent = data.records[0].parentNode; dropHandlers.processDrop(); }, drop: function (node, data, overModel, dropPosition) { var me = data.records[0]; // now will check if the current parent is the root. Can't allow this! var configDataPanelsTree = Ext.getCmp('configDataPanelsTree'); var oldParent = configDataPanelsTree.tempParent; var currentParent = data.records[0].parentNode; console.log( "TO : " + currentParent.data.text ); // If the new parent is root, then its parent is null ! // Roll back the drag event by removing from current parent and inserting back in old parent. if ( !currentParent.parentNode ) { me.remove(); oldParent.appendChild( me ); } }, } },添加到TreePanel，以存储拖动节点的父级。

然后（TreePanel的身体）：

tempIndex : 0

问题是：当我将节点回滚到其旧父节点时，它会落在子节点列表中。我可以把它放回原来的位置吗？

修改

解决：参考：Wagtail

将beforedrop添加到TreePanel的正文中。

添加到configDataPanelsTree.tempIndex = data.records[0].data.index;事件： drop

添加到var oldIndex = configDataPanelsTree.tempIndex;事件： drop

Chenged oldParent.appendChild( me );事件：来自oldParent.insertChild( oldIndex, me); 到source-destination

现在，在根级别下降后，节点回到原来的位置。毕竟我的功夫还不错......

如何拒绝在根级别删除节点？

1 个答案: