Restrict drag and drop in ExtJs tree panel

Question

I developed two tree panels in ExtJs (Tree-1 and Tree-2). These trees are working with drag and drop in between two of them in all the cases. I want drag and drop in the following cases (From Tree-1 to Tree-2), (From Tree-1 to Tree-1) and (From Tree-2 to Tree-2) only. That is want to restrict drag and drop from Tree-2 to Tree-1. The following is my source code.

/*Tree1*/
    Ext.create('Ext.tree.Panel', {
                title: 'From Agent:',
                collapsible: true,
                collapseDirection: Ext.Component.DIRECTION_TOP,
                frame:true,
                width: 310,
                minHeight: 50,
                margin: '0 0 0 0',
                store: store1,
                listeners:{
                    checkchange:function( node, checked, eOpts){
                         node.cascadeBy(function(n){n.set('checked', checked);} );
                    }
                },
                rootVisible: false,
                viewConfig: {
                    plugins: {
                        ptype: 'treeviewdragdrop',
                        sortOnDrop: true,
                        containerScroll: true
                    }
                },
                sorters: [{
                    property: 'text',
                    direction: 'ASC'
                }]
            }),

 /*Tree2*/
            Ext.create('Ext.tree.Panel', {
                title: 'To Agent:',
                frame: true,
                collapsible: true,
                collapseDirection: Ext.Component.DIRECTION_TOP,
                width: 310,
                margin: '0 0 0 20',
                minHeight: 50,
                store: store2,
                listeners:{
                    checkchange:function( node, checked, eOpts){
                         node.cascadeBy(function(n){n.set('checked', checked);} );
                    }
                },
                rootVisible: false,
                viewConfig: {
                    plugins: {
                        ptype: 'treeviewdragdrop',
                        sortOnDrop: true,
                        containerScroll: true
                    }
                },
                sorters: [{
                    property: 'text',
                    direction: 'ASC'
                }]
            }),

These codes are working as cut and paste while drag and drop. I want to make these code as copy and paste while drag and drop. Please, help me. Thanks in advance.

Answer 1

Take a look at this example from the docs:

http://docs.sencha.com/extjs/4.2.2/extjs-build/examples/tree/custom-drop-logic.html

Basically it uses nodedragover event to control when one can drop or not.

Return false when you don't want to allow the drop.

As far as making it copy instead of cutting, the documentation mentions the following (although I've never tried it myself):

This plugin provides drag and/or drop functionality for a TreeView.

It creates a specialized instance of DragZone which knows how to drag out of a TreeView and loads the data object which is passed to a cooperating DragZone's methods with the following properties:

copy : Boolean

The value of the TreeView's copy property, or true if the TreeView was configured with allowCopy: true and the control key was pressed when the drag operation was begun.

Try setting copy: true to the two views.