Example of Creating the SimpleTreeList Component with Drag Mode

To execute the example, in the HEAD tag add links to component library PP.js and visual style tables PP.css. Add a DIV element with the "container" identifier in the BODY tag. Add an image containing a list of node icons.

Connect the script that generates random nodes:

<script src="genJson.js" type="text/javascript"></script>

genJson.js script

Add the following code to the <script> tag:

// Determine drag events
var onNodeDrag = function (s, a)
{
// Disable adding new children to leaves 
    var targetIsFolder = treelist.getNodeChildrenCount(a.TargetNode) > 0,
           draggableIsFolder = treelist.getNodeChildrenCount(a.Nodes[0]) > 0;
    if (!targetIsFolder)
a.CanTakeChildren = false;
};
var onNodeDragEnd = function (s, a) { // Output drag result to console
    console.log(a);
};
var onNodeDragStart = function (s, a) { // Disable dragging of last child     var dragNode = a.Nodes[0],     dragNodeParent = t.getNodeParent(dragNode);     if (dragNodeParent && t.getNodeChildrenCount(dragNodeParent) == 1)     a.Cancel = true; // cancel operation in order the node remains as a folder, that is, it has children }; // -------------------- // Create a tree     var json = genJson(500, 100, false, 1234567);  // Node generation function     var t, Tree;     t = Tree = new PP.Ui.SimpleTreeList({         DataObject: json,         DataMappers: {
            Key: 'k',
            Index: 'i',
            Parent: 'p',
            Content: new PP.PropertyMapper({
                Getter: function (item) { return item.a.it },
                Setter: function (item, value) { item.a.it = value; }
            }),
            Selected: 's',
            Expanded: 'e',
            ImageIndex: new PP.PropertyMapper({
            Getter: function (item) { return this.getNodeChildrenCount(item.k) ? (item.e ? 1 : 0) : 2 },
            Context: t
            }),
        },
        ImageList: imageList = new PP.ImageList({
            Source: '../../../build/img/treeIcons.png',
            IconHeight: 20,
            IconWidth: 20
        }),
        Width: 580,
        Height: 580,
        // Determine drag settings
        EnableDragAndDrop: true,
        DragAndDropMode: 'MultiDrag',
        DragAndDropDelay: 200,
        DragAndDropIndent: 0,
        EnableDragOutside: true,
        EnableDropOutside: true,
        EnableColumnsMenu: true,
        SelectionMode: 'ControlShiftMultiSelect',
        ParentNode: 'container',
        Captions: [{
         Content: 'first',
            Width: '40%'
        },{
         Content: 'second',
            Width: '10%'
        },{
         Content: 'third',
            Width: '50%'
        }],
        NodeDrag: onNodeDrag,
        NodeDragStart: onNodeDragStart,
        NodeDragEnd: onNodeDragEnd
    });
    Tree.setSelectedForAll(false);

After executing the example the SimpleTreeList component with node dragging is created.

See also:

SimpleTreeList