Available in the OSS Version
Tree - Drag and Drop - Single Tree
This sample demonstrates how to drag and drop nodes inside an igTree control.
This sample uses CTP (Community Technical Preview) features. The API and behavior may change when these features are released with full support.
File Manager
Trash
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/2023.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="http://cdn-na.infragistics.com/igniteui/2023.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/2023.2/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2023.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>
var files = [
{
Text: "Computer", Value: "Folder", ImageUrl: "../../images/samples/tree/computer.png", Folder: [
{
Text: "Music", Value: "Folder", ImageUrl: "../../images/samples/tree/book.png", Folder: [
{
Text: "Y.Malmsteen", Value: "Folder", ImageUrl: "../../images/samples/tree/book.png", Folder: [{
Text: "Making Love", Value: "File", ImageUrl: "../../images/samples/tree/music.png", Folder: ""
}, { Text: "Rising Force", Value: "File", ImageUrl: "../../images/samples/tree/music.png", Folder: "" },
{ Text: "Fire and Ice", Value: "File", ImageUrl: "../../images/samples/tree/music.png", Folder: "" }
]
},
{
Text: "WhiteSnake", Value: "Folder", ImageUrl: "../../images/samples/tree/book.png", Folder: [
{ Text: "Trouble", Value: "File", ImageUrl: "../../images/samples/tree/music.png", Folder: "" },
{ Text: "Bad Boys", Value: "File", ImageUrl: "../../images/samples/tree/music.png", Folder: "" },
{ Text: "Is This Love", Value: "File", ImageUrl: "../../images/samples/tree/music.png", Folder: "" }
]
},
{
Text: "AC/DC", Value: "Folder", ImageUrl: "../../images/samples/tree/book.png", Folder: [
{ Text: "ThunderStruck", Value: "File", ImageUrl: "../../images/samples/tree/music.png", Folder: "" },
{ Text: "T.N.T.", Value: "File", ImageUrl: "../../images/samples/tree/music.png", Folder: "" },
{ Text: "The Jack", Value: "File", ImageUrl: "../../images/samples/tree/music.png", Folder: "" }
]
},
{
Text: "Rock", Value: "Folder", ImageUrl: "../../images/samples/tree/book.png", Folder: [{
Text: "Bon Jovi - Always", Value: "File", ImageUrl: "../../images/samples/tree/music.png", Folder: ""
}]
}]
},
{
Text: "My Documents", Value: "Folder", ImageUrl: "../../images/samples/tree/documents-folder.png", Folder: [
{
Text: "2009", Value: "Folder", ImageUrl: "../../images/samples/tree/documents-folder.png", Folder: [
{ Text: "Month Report", Value: "File", ImageUrl: "../../images/samples/tree/documents.png", Folder: "" },
{ Text: "Year Report", Value: "File", ImageUrl: "../../images/samples/tree/documents.png", Folder: "" }
]
},
{
Text: "2010", Value: "Folder", ImageUrl: "../../images/samples/tree/documents-folder.png", Folder: [
{ Text: "Month Report", Value: "File", ImageUrl: "../../images/samples/tree/documents.png", Folder: "" },
{ Text: "Year Report", Value: "File", ImageUrl: "../../images/samples/tree/documents.png", Folder: "" }
]
}]
},
{
Text: "Pictures", Value: "Folder", ImageUrl: "../../images/samples/tree/coins.png", Folder: [
{
Text: "BirthDay2009", Value: "Folder", ImageUrl: "../../images/samples/tree/coins.png", Folder: [
{ Text: "Picture1", Value: "File", ImageUrl: "../../images/samples/tree/coins_add.png", Folder: "" },
{ Text: "Picture2", Value: "File", ImageUrl: "../../images/samples/tree/coins_add.png", Folder: "" },
{ Text: "Picture3", Value: "File", ImageUrl: "../../images/samples/tree/coins_add.png", Folder: "" },
{ Text: "Picture4", Value: "File", ImageUrl: "../../images/samples/tree/coins_add.png", Folder: "" }
]
},
{
Text: "BirthDay2010", Value: "Folder", ImageUrl: "../../images/samples/tree/coins.png", Folder: [
{ Text: "Picture1", Value: "File", ImageUrl: "../../images/samples/tree/coins_add.png", Folder: "" },
{ Text: "Picture2", Value: "File", ImageUrl: "../../images/samples/tree/coins_add.png", Folder: "" },
{ Text: "Picture3", Value: "File", ImageUrl: "../../images/samples/tree/coins_add.png", Folder: "" }
]
}]
},
{
Text: "Network", Value: "Folder", ImageUrl: "../../images/samples/tree/door.png", Folder: [
{ Text: "Archive", Value: "Folder", ImageUrl: "../../images/samples/tree/door_in.png", Folder: "" },
{ Text: "BackUp", Value: "Folder", ImageUrl: "../../images/samples/tree/door_in.png", Folder: "" },
{ Text: "FTP", Value: "Folder", ImageUrl: "../../images/samples/tree/door_in.png", Folder: "" }
]
},
{ Text: "Deleted", Value: "Folder", ImageUrl: "../../images/samples/tree/bin_empty.png", Folder: "" }
]
}];