This plugin provides a drag and/or drop functionality for a TreeView class. It creates a specialized instance of DragZone, which knows how to drag out of a TreeView class, and loads the data object which is passed on to the cooperating methods of DragZone with the following properties:

It also creates a specialized instance of Ext.dd.DropZone, which cooperates with other DropZone classes. These DropZone classes are members of the same ddGroup, which processes such data objects. Adding this plugin to a view means that two new events may be fired from the client TreeView, before the drag-and-drop.

viewConfig: {
    plugins: { ptype: 'treeviewdragdrop' }
}

Here, in the following code snippet, a tree class has been defined, in which the TreeViewDragDrop plugin is used to drag-and-drop the nodes:

Ext.define('Examples.view.treeviewdragdrop.TreeViewDragDropTree', {
    extend : 'Ext.tree.Panel',
    alias : 'widget.treeviewdragdroptree',
    requires : ['Examples.store.SampleTreeStore',
                'Ext.tree.plugin.TreeViewDragDrop'],

    constructor : function(config) {

        Ext.apply(this, {
            border : false,
            store : Ext.create('Examples.store.SampleTreeStore'),
            viewConfig : {
                plugins : [
                    'treeviewdragdrop'
                ]
            },            
            useArrows : true
        });

        this.callParent(arguments);

    }
});

In the following screenshot you can see the result of the TreeViewDragDropTree class that we have defined, which is used within a window:

You can see that when we are dragging the 09/29/2006 node, a visible floating message stating that one node is selected, is shown, and then we can easily drop that node within other nodes.

This plugin is well documented at http://docs.sencha.com/extjs/4.1.3/#!/api/Ext.tree.plugin.TreeViewDragDrop, where you will get all the available configuration options, properties, methods, and events for this plugin.