Question

我正在尝试从树面板到视图实现一些拖放功能，但我无法做到这一点。我是使用ExtJs的新手，也许我做错了什么。我的树定义如下：

var treeMeasures = Ext.create('Ext.tree.Panel', {
    id: 'treeMeasuresPanel',
    title: 'Measures',
    region: 'north',
    store: dsMeasures,
    rootVisible: true,
    width: '100%',
    height: '50%',
    useArrows: true,
    enableDD: true,
    allowDrop: false,
    collapsible: true,
    border: 0,
    style: 'border-right:1px solid #99BCE8;border-top:none;border-left:none;border-bottom: none;',
    viewConfig: {
        listeners: {
            render: initializeFieldsDragZone
        },
        plugins: {
            ptype: 'treeviewdragdrop',
            ddGroup: 'fieldsToAreas',
            enableDrag: true,
            enableDrop: false,
            containerScroll: true
        }
    }
});

initializeFieldsDragZone函数：

function initializeFieldsDragZone(v, record, item, index, evt, eOpts) {
v.dragZone = Ext.create('Ext.dd.DragZone', v.getEl(), {

    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,
                controlData: v.getRecord(sourceEl).data
            };
        }
    },

    //      Provide coordinates for the proxy to slide back to on failed drag.
    //      This is the original XY coordinates of the draggable element.
    getRepairXY: function () {
        return this.dragData.repairXY;
    }
});

}

观点：

 var filterAreaView = Ext.create('Ext.view.View', {
    store: dsFilterArea,
    tpl: "",
    ddGroup: 'fieldsToAreas',
    bodyStyle: {
        background: 'ffffff'
    },
    listeners: {
            render: initializeAreasDropZone
        }        
});

initializeAreasDropZone函数是：

function initializeAreasDropZone(area) {
var view = area.getEl();

view.dropZone = Ext.create('Ext.dd.DropZone', area.el, {

    getTargetFromEvent: function (e) {
        return e.getTarget('.x-grid-row');
    },

    onNodeEnter: function (target, dd, e, data) {

    },

    onNodeOut: function (target, dd, e, data) {

    },

    onNodeOver: function (target, dd, e, data) {
        return true;
    },

    onNodeDrop: function (target, dd, e, data) {

//我的代码

        return true;
    }
});

}

问题是当我从树中拖动节点并尝试放入视图时没有任何反应。

有谁知道我做错了什么？

谢谢，

阿尔贝托

Answer 1

我想你可能会过度思考这个问题。我在两个面板（Ext.tree.Panel）之间创建了一个DD工作模型，每个面板包含一个根，包含多个文件夹，每个文件夹中有多个叶子。只需将插件添加到每个启用DD的树：

viewConfig: {
        plugins: {
            ptype: 'treeviewdragdrop',
            ddGroup: 'myDDGroup',
            appendOnly: true,
            sortOnDrop: true,
            containerScroll: true
        }
    },

执行此操作后，当我单击并将一个树叶从一个树拖到另一个树时，它会在释放鼠标按钮时将叶子尽职地添加到目标文件夹中。就监控事件而言，我没有做任何其他事情。

Answer 2

如果你使用TreePanel进行拖动区，我认为我们不需要创建函数initializeFieldsDragZone，只需使用插件“treeviewdragdrop”。

您的代码中的问题是initializeAreasDropZone必须具有与插件相同的ddgroup：

 function initializeAreasDropZone(area) {
    var view = area.getEl();

    view.dropZone = Ext.create('Ext.dd.DropZone', area.el, {

        getTargetFromEvent: function (e) {
            return e.getTarget('.x-grid-row');
        },

        onNodeEnter: function (target, dd, e, data) {

        },

        onNodeOut: function (target, dd, e, data) {

        },

        onNodeOver: function (target, dd, e, data) {
            return true;
        },

        onNodeDrop: function (target, dd, e, data) {
            console.log(data);
        },

        ddGroup: 'fieldsToAreas'
    });
}

欢呼声

Dropzone Tree面板查看

2 个答案: