Question

我正在使用ext js将数据从一个数据视图拖放到另一个数据视图。我想知道drop事件是发生在现有节点之上还是刚刚丢弃在dataview的空白区域中。

这是我的dropTarget的代码：

...
onDesktopDataViewRender: function (v) {
    var dataView = v;

    v.dropTarget = Ext.create('Ext.dd.DropTarget', v.el, {
        ddGroup: 'FromSearchToDesktop',
        notifyDrop: function (source, e, dropData) {

            //Want do do something like:
            //if(dropped directly on any node) {
            //    do some logic with that node
            //}
            //else {
            //    do the code below

                var recordAlreadyExists = false;

                v.store.each(function (r) {
                    if (r.data.ID == dropData.searchData.ID) {
                        recordAlreadyExists = true;
                    }
                });

                if (recordAlreadyExists == false) {                        
                    v.store.add(dropData.searchData);
                }
            //end else

        }
    });
}
...

Answer 1

耶！终于想出了这个。

快速回答是为节点创建DropZone。答案很长就是如何做到的。

在我的程序中，用户可以将项目从DataView A拖动到DataView B.在DataView B中删除项目后，该项目将显示在DataView B中。最重要的是，用户可以从DataView A拖动项目，并且将它放在DataView B内的一个节点上。代码需要区分DataView上放置的项目和DataView内部节点上放置的项目。

通用说明：

在DataViewB的onrender事件中，创建一个ddGroup为的dropTarget ＆＃34; DataViewB＆＃34;
在notifyDrop函数内部，创建一个新节点。
同样在notifyDrop函数内部，创建另一个dropTarget （这个用于节点而不是DataView），ddGroup为＆＃34; DataViewBNode＆＃34;。
在DataViewA的onRender事件中，使用ddGroup创建DragZone ＆＃34; DataViewBNode＆＃34; （！重要！）
在DataViewA的Afterrender事件中，将dragZone添加到＆＃34; DataViewB＆＃34;基。

现在，您将能够从DataViewA拖放并放入DataViewB的空白区域以添加节点，但您也可以直接从DataViewB中删除节点并执行其他操作。

第一个ddGroup用于节点非常重要，并且在afterrender事件中添加的ddGroup用于DataView

以下是DataView A的代码：

onDataViewARender: function (v) {
    var dataView = v;
...
    v.dragZone = Ext.create('Ext.dd.DragZone', v.getEl(), {
        ddGroup: 'DataViewBNode',   
        getDragData: function (e) {
            var sourceEl = e.getTarget(v.itemSelector, 10), d;
            if (sourceEl) {
                d = sourceEl.cloneNode(true);
                d.id = Ext.id();
                return v.dragData = {
                    sourceEl: sourceEl,
                    repairXY: Ext.fly(sourceEl).getXY(),
                    ddel: d,
                    searchData: v.getRecord(sourceEl).data,
                    store: v.store,
                    source: 'DataViewA'
                }
            }
        },

        getRepairXY: function () {
            return this.dragData.repairXY;
        }
    });
},

onDataViewAAfterRender: function(v) {
    var dragZone = v.dragZone;

    dragZone.addToGroup('DataViewB');
},

以下是DataViewB的代码

    onDataViewBRender: function (v) {
        var dataView = v;

        v.dropTarget = Ext.create('Ext.dd.DropTarget', v.el, {
            ddGroup: 'DataViewB',
            notifyDrop: function (source, e, dropData) {
                var recordAlreadyExists = false;

                v.store.each(function (r) {
                    if (r.data.ID == dropData.searchData.ID && r.data.Type == dropData.searchData.Type) {
                        recordAlreadyExists = true;
                    }
                });

                if (recordAlreadyExists == false) {                        
                    v.store.add(dropData.searchData);

                    var nodes = v.container.dom.childNodes[0].childNodes;
                    var index = v.container.dom.childNodes[0].childNodes.length -1;

                    //
                    //Here is where you create the dropTarget for the new node
                    //
                    nodes[index].dropTarget = Ext.create('Ext.dd.DropTarget', nodes[index], {
                        ddGroup: 'DataViewBNode',
                        notifyDrop: function (source, e, dropData) {
                            console.log('success')                            
                        }
                    });
                }

            }
        });
...
    },

ext js拖放数据视图确定节点被丢弃

1 个答案: