Available in the OSS Version

Tree - Drag and Drop - Single Tree

This sample demonstrates how to drag and drop nodes inside an igTree control.

File Manager

This sample is designed for a larger screen size.

On mobile, try rotating your screen, view full size, or email to another device.

Code View

Copy to Clipboard 
<!DOCTYPE html>
<html>
<head>
    <title></title>

    <!-- Ignite UI for jQuery Required Combined CSS Files -->
    <link href="http://cdn-na.infragistics.com/igniteui/2024.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
    <link href="http://cdn-na.infragistics.com/igniteui/2024.2/latest/css/structure/infragistics.css" rel="stylesheet" />

    <!-- Sample CSS -->
    <style type="text/css">

        .clear {
            clear: both;
        }

        #trash {
			margin-top: 10px;
            height: 150px;
            padding: 1%;
        }

            #trash h4 {
                line-height: 16px;
                margin: 0 0 0.4em;
            }

                #trash h4 .ui-icon {
                    float: left;
                }

        .containerTree {
			margin-top: 10px;
            overflow: auto;
        }

        #tree {
            width: 330px;
        }

        #left {
            margin-right: 150px;
        }

        #right {
            width: 150px;
            float: right;
        }

        .containerModalDialog {
            overflow: auto;
            width: 180px;
            margin: 0 auto;
            padding-top: 5px;
			height: 35px;
        }

        #leftYes {
            float: left;
        }

        #rightNo {
            float: right;
        }

        @media screen and (max-width: 500px) {
            #right {
                float: none;
            }
    		#trash { 
				margin-bottom: 10px;
    		}
    		.containerModalDialog { 
				width: 160px;
    		}
    		.containerModalDialog #leftYes, .containerModalDialog #rightNo { width: 70px; }
    		#yesModalDialog, #noModalDialog { width: 65px!important; }
        }
    </style>

    <script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>

    <!-- Ignite UI for jQuery Required Combined JavaScript Files -->
    <script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/infragistics.core.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/infragistics.lob.js"></script>

</head>
<body>
	<h2>File Manager</h2>
    <div class="containerTree">
        <div id="right">
            <div id="trash" class="ui-widget-content ui-state-default">
                <h4 class="ui-widget-header"><span class="ui-icon ui-icon-trash"></span>Trash</h4>
            </div>
        </div>
        <div id="left">
            <!--igTree target element-->
            <div id="tree">
            </div>

            <!--igDialog target element-->
            <div id="modalDialog">
                <div class="containerModalDialog">
                    <div id="leftYes">
                        <button id="yesModalDialog">
                        </button>
                    </div>

                    <div id="rightNo">
                        <button id="noModalDialog">
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="/data-files/hierarchical-files.js"></script>

    <script>

        $(function () {            

            var deletedNode,
				helperText;

            // Initialize the igDialog
            $("#modalDialog").igDialog({
                imageClass: "ui-icon ui-icon-alert",
                state: "closed",
                modal: true,
                draggable: false,
                resizable: false
            });

            // Initialize buttons for the Modal igDialog with igButton
            $("#yesModalDialog").igButton({ labelText: "Yes", width: 80 });
            $("#noModalDialog").igButton({ labelText: "No", width: 80 });

            $("#yesModalDialog").on("click", function (e) {
                if (helperText) {
                    var node = $("#tree").igTree("findNodesByText", helperText);
                    if (node.length > 0) {
                        $("#tree").igTree("removeAt", node[0].path);
                        $("#tree").igTree("addNode", node[0].data, deletedNode[0].element);
                        helperText = "";
                    }
                }
                // Close the Modal igDialog
                $("#modalDialog").igDialog("close");
            });

            $("#noModalDialog").on("click", function (e) {
                // Close the Modal igDialog
                $("#modalDialog").igDialog("close");
            });

            // Initialize the igTree
            $("#tree").igTree({
                checkboxMode: "triState",
                singleBranchExpand: true,
                dataSource: files,
                dataSourceType: "json",
                initialExpandDepth: 0,
                pathSeparator: ".",
                bindings: {
                    textKey: "Text",
                    valueKey: "Value",
                    imageUrlKey: "ImageUrl",
                    childDataProperty: "Folder"
                },
                // Enable Drag-and-drop feature
                dragAndDrop: true,
                dragAndDropSettings: {
                    dragAndDropMode: "move",
                    customDropValidation: function (element) {
                        // Validates the drop target
                        var droppableNode = $(this),
							draggableNode = $(element),
                            listContainer = droppableNode.closest("ul");

                        if (draggableNode.attr("data-path") == "0") {
                            return false;
                        }

                        deletedNode = $("#tree").igTree("findNodesByText", "Deleted");
                        if (deletedNode.length > 0) {
                            var nodePathArray = draggableNode.attr("data-path").split(".");
                            var deletedNodePathArray = deletedNode[0].path.split(".");
                            if (nodePathArray[0] == deletedNodePathArray[0] &&
								nodePathArray[1] == deletedNodePathArray[1]) {
                                return false;
                            }
                        }

                        if (droppableNode.is('a') && droppableNode.closest('li[data-role=node]').attr('data-value') === 'File') {
                            return false;
                        }
                        
                        if (!droppableNode.is('a') && listContainer.length && listContainer.attr("data-depth") === "0") {
                            return false;
                        }

                        return true;
                    }
                }
            });

            $("#trash").droppable({
                tolerance: "pointer",
                activeClass: "ui-state-highlight",
                accept: function (element) {
                    var path = $(element).attr("data-path");

                    if (path == "0") {
                        return false;
                    }

                    deletedNode = $("#tree").igTree("findNodesByText", "Deleted");
                    if (deletedNode.length > 0) {
                        var nodePathArray = path.split(".");
                        var DeletedNodePathArray = deletedNode[0].path.split(".");
                        if (nodePathArray[0] == DeletedNodePathArray[0] &&
                            nodePathArray[1] == DeletedNodePathArray[1]) {
                            return false;
                        }
                    }

                    return true;
                },
                over: function (event, ui) {
                    markup = $(ui.helper.html());
                    markup.find("span").removeClass("ui-icon-cancel").addClass("ui-icon-trash").siblings("strong");
                    ui.helper.
						removeClass("ui-widget ui-igtree-dropindicator ui-state-error ui-corner-all").
						addClass("ui-widget ui-igtree-dropindicator ui-state-highlight ui-corner-all").
						html(markup);
                },
                out: function (event, ui) {
                    markup = $(ui.helper.html());
                    markup.find("span").removeClass("ui-icon-trash").addClass("ui-icon-cancel").siblings("strong");

                    ui.helper.
						removeClass("ui-widget ui-igtree-dropindicator ui-state-highlight ui-corner-all").
						addClass("ui-widget ui-igtree-dropindicator ui-state-error ui-corner-all").
						html(markup);
                },
                drop: function (event, ui) {
                    helperText = ui.helper.text();
                    $("#modalDialog").igDialog("option", "headerText", "Permanently delete - " + helperText);
                    $("#modalDialog").igDialog("open");
                }
            });

        });

    </script>

</body>
</html>