This script shows basic drag and drop node moving in a tree. In this implementation there are no restrictions and anything can be dropped anywhere except appending to nodes marked “leaf” (the files).

Drag along the edge of the tree to trigger auto scrolling while performing a drag and drop.

In order to demonstrate drag and drop insertion points, sorting was not enabled.

The data for this tree is asynchronously loaded with a JSON TreeLoader.

The js is not minified so it is readable.

Ext.onReady(function(){
    // shorthand
    var Tree = Ext.tree;

    var tree = new Tree.TreePanel({
        useArrows: true,
        autoScroll: true,
        animate: true,
        enableDD: true,
        containerScroll: true,
        border: false,
        // auto create TreeLoader
        dataUrl: 'get-nodes.php',

        root: {
            nodeType: 'async',
            text: 'Ext JS',
            draggable: false,
            id: 'src'
        }
    });

    // render the tree
    tree.render('tree-div');
    tree.getRootNode().expand();
});

Demo: http://extjs.com/deploy/dev/examples/tree/reorder.html
Download: http://extjs.com/deploy/dev/examples/tree/reorder.js
Source: http://extjs.com/deploy/dev/examples/tree/reorder.html

Related Listings:

1. Resizable Combo Box – ExtJS Data Sources The combo box can use any type of...
2. DHTMLX JavaScript Tree Component dhtmlxTree (DHTML extensions Tree) is a feature rich JavaScript...
3. Table Drag n Drop Script I’ve been using JQuery for a while now and really...
4. Drag n Drop to order list Elements Drag and drop feature is a popular effect in modern...
5. Tree with Checkbox Tree with CheckBox nodes An extension for Ext.tree.TreeNodeUI to...

Do you like this post?

Email: