Question

我只需要拖动和放大仅当树节点是EXTJS中的叶子时才删除它们。这是我的代码：

拖动来源

var tree = Ext.create('Ext.tree.Panel', {
    title: 'Simple Tree',
    width: 400,
    height: 600,
    store: store,
    rootVisible: false,            
    viewConfig: {
        plugins: {
            ptype: 'treeviewdragdrop',
            copy: true,
            dragGroup: 'myDDGroup'
        }
    },
});

放弃目标

Ext.define('myPanelDropTarget', {
    extend: 'Ext.dd.DropTarget',

    notifyEnter : function(source, e, data) {
        console.log('enter');
        return this.callParent(arguments);
    },                
    notifyOut : function(source, e, data) {
        console.log('out');
        return this.callParent(arguments);
    },

    notifyOver : function(source, e, data) {
        console.log('over');
        return this.callParent(arguments);
    },                
    notifyDrop : function(source, e, data) {
        var me = this;
        console.log('drop');

        var text = data.records[0].get('text');

        var d3ComponentEl = me.panel.down('#d3Component').getEl();

        d3ComponentEl.insertHtml('beforeEnd', text + '<br />');                

        return true;
    }                           
});

使用drop targetstrong text配置的面板

var panel = Ext.create('Ext.panel.Panel', {
    title: 'Drop Target Panel',
    border: true,
    width: 400,
    height: 600,
    items: [
        {
          xtype: 'component',
          id: 'd3Component',
          autoEl: { tag: 'div' }
        }
    ],
    listeners: {
        'afterrender': function () {
            panel.dropZone = Ext.create('myPanelDropTarget', panel.getEl(), {
                ddGroup: 'myDDGroup',
                panel: panel
            });                    
        }
    }            
});

这样可以正常使用，但会发生的事情是我也可以从树中拖放文件夹，并且只会因为困难而限制叶子。

示例：

完整的实例：https://fiddle.sencha.com/#fiddle/340

在这里查看节点是否不是叶子，如果不取消叶子丢弃事件，我需要的是什么。有什么想法吗？

Ext.define('myPanelDropTarget', {
    extend: 'Ext.dd.DropTarget',     

     nodedragover: function(targetNode, position, dragData){    
          var me = this;    
                        var rec = dragData.records[0].raw.canDrop;  
                        var camara = me.panel.down('#'+id);
                        console.log(camara.getEl());
                        if(!rec)
                        {
                 ***//I need to cancel the drop event***

                        }

                    },
    notifyDrop : function(source, e, data) {


        this.nodedragover(source, e, data);

        var me = this;  

        var cam = data.records[0].raw;

        var target = cam.protocol+'://'+cam.user+':'+cam.pass+'@'+cam.ip+':'+cam.port+'/'+cam.ruta;


        var camara = me.panel.down('#'+id);
        camara.setTitle(cam.text);

        var data = '<embed type="application/x-vlc-plugin"  id="vlc1" name="vlc1" toolbar="false" allowfullscreen="false"  width=100%; height=100%; target= "'+target+'"; />';      

        camara.body.setHTML(data);  


        return true;
    }               


});

Answer 1

您可以在sencha论坛restrict the drag & drop only if tree node is leaf in EXTJS 4.2

中查看答案

如何限制阻力和阻力？仅当树节点是EXTJS中的叶子时才丢弃

1 个答案: