$(function() {
createTreeView('#treeviewDriveC', itemsDriveC);
createTreeView('#treeviewDriveD', itemsDriveD);
createSortable('#treeviewDriveC', 'driveC');
createSortable('#treeviewDriveD', 'driveD');
});
function createTreeView(selector, items) {
$(selector).dxTreeView({
items: items,
expandNodesRecursive: false,
dataStructure: 'plain',
width: 250,
height: 380,
itemTemplate: function(item) {
var icon = item.isDirectory ? 'activefolder' : 'file';
return "<div><i class=\"dx-icon dx-icon-" + icon +"\"></i><span>" + item.name + "</span></div>";
}
});
}
function createSortable(selector, driveName) {
$(selector).dxSortable({
filter: ".dx-treeview-item",
group: "shared",
data: driveName,
allowDropInsideItem: true,
allowReordering: true,
onDragChange: function(e) {
if(e.fromComponent === e.toComponent) {
var $nodes = e.element.find(".dx-treeview-node");
var isDragIntoChild = $nodes.eq(e.fromIndex).find($nodes.eq(e.toIndex)).length > 0;
if(isDragIntoChild) {
e.cancel = true;
}
}
},
onDragEnd: function(e) {
if(e.fromComponent === e.toComponent && e.fromIndex === e.toIndex) {
return;
}
var fromTreeView = getTreeView(e.fromData);
var toTreeView = getTreeView(e.toData);
var fromNode = findNode(fromTreeView, e.fromIndex);
var toNode = findNode(toTreeView, calculateToIndex(e));
if(e.dropInsideItem && toNode !== null && !toNode.itemData.isDirectory) {
return;
}
var fromTopVisibleNode = getTopVisibleNode(fromTreeView);
var toTopVisibleNode = getTopVisibleNode(toTreeView);
var fromItems = fromTreeView.option('items');
var toItems = toTreeView.option('items');
moveNode(fromNode, toNode, fromItems, toItems, e.dropInsideItem);
fromTreeView.option("items", fromItems);
toTreeView.option("items", toItems);
fromTreeView.scrollToItem(fromTopVisibleNode);
toTreeView.scrollToItem(toTopVisibleNode);
}
});
}
function getTreeView(driveName) {
return driveName === 'driveC'
? $('#treeviewDriveC').dxTreeView('instance')
: $('#treeviewDriveD').dxTreeView('instance');
}
function calculateToIndex(e) {
if(e.fromComponent != e.toComponent || e.dropInsideItem) {
return e.toIndex;
}
return e.fromIndex >= e.toIndex
? e.toIndex
: e.toIndex + 1;
}
function findNode(treeView, index) {
var visibleItems = [];
buildVisibleNodesArray(treeView.getNodes(), visibleItems);
if(visibleItems.length <= index) {
return null;
}
return visibleItems[index];
}
function buildVisibleNodesArray(nodes, arrayContainer) {
for(var i = 0; i < nodes.length; i++) {
arrayContainer.push(nodes[i]);
if(nodes[i].expanded !== false && nodes[i].children){
buildVisibleNodesArray(nodes[i].children, arrayContainer);
}
}
}
function moveNode(fromNode, toNode, fromItems, toItems, isDropInsideItem) {
var fromIndex = findIndex(fromItems, fromNode.itemData.id);
fromItems.splice(fromIndex, 1);
var toIndex = toNode === null || isDropInsideItem
? toItems.length
: findIndex(toItems, toNode.itemData.id);
toItems.splice(toIndex, 0, fromNode.itemData);
moveChildren(fromNode, fromItems, toItems);
if(isDropInsideItem) {
fromNode.itemData.parentId = toNode.itemData.id;
} else {
fromNode.itemData.parentId = toNode != null
? toNode.itemData.parentId
: undefined;
}
}
function moveChildren(node, fromItems, toItems) {
if(!node.itemData.isDirectory) {
return;
}
node.children.forEach(function(child) {
if(child.itemData.isDirectory) {
moveChildren(child, fromItems, toItems);
}
var fromIndex = findIndex(fromItems, child.itemData.id);
fromItems.splice(fromIndex, 1);
toItems.splice(toItems.length, 0, child.itemData);
});
}
function findIndex(array, id) {
var idsArray = array.map(function(elem) { return elem.id; });
return idsArray.indexOf(id);
}
function getTopVisibleNode(component) {
var treeViewElement = component.element().get(0);
var treeViewTopPosition = treeViewElement.getBoundingClientRect().top;
var nodes = treeViewElement.querySelectorAll(".dx-treeview-node");
for(var i = 0; i < nodes.length; i++) {
var nodeTopPosition = nodes[i].getBoundingClientRect().top;
if(nodeTopPosition >= treeViewTopPosition) {
return nodes[i];
}
}
return null;
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>DevExtreme Demo</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script>
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.1.6/css/dx.common.css" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.1.6/css/dx.light.css" />
<script src="https://cdn3.devexpress.com/jslib/20.1.6/js/dx.all.js"></script>
<script src="data.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css" />
<script src="index.js"></script>
</head>
<body class="dx-viewport">
<div class="demo-container">
<div class="form">
<div class="drive-panel">
<div class="drive-header dx-treeview-item"><i class="dx-icon dx-icon-activefolder"></i><span>Drive C:</span></div>
<div id="treeviewDriveC"></div>
</div>
<div class="drive-panel">
<div class="drive-header dx-treeview-item"><i class="dx-icon dx-icon-activefolder"></i><span>Drive D:</span></div>
<div id="treeviewDriveD"></div>
</div>
</div>
</div>
</body>
</html>
.form {
display: flex;
}
.form>div {
display: inline-block;
vertical-align: top;
}
#treeviewDriveC,
#treeviewDriveD {
margin-top: 10px;
}
.drive-header {
min-height: auto;
padding: 0px;
cursor: default;
}
.drive-header .dx-icon {
margin-top: -4px;
}
.drive-panel {
padding: 20px 30px;
font-size: 115%;
font-weight: bold;
border-right: 1px solid rgba(165, 165, 165, 0.4);
height: 100%;
}
.drive-panel:last-of-type {
border-right: none;
}
.dx-treeview-item {
position: relative;
left: -2px;
}
var itemsDriveD = [];
var itemsDriveC = [{
id: '1',
name: "Documents",
isDirectory: true,
expanded: true
}, {
id: '2',
parentId: '1',
name: "Projects",
isDirectory: true,
expanded: true
}, {
id: '3',
parentId: '2',
name: "About.rtf",
isDirectory: false,
expanded: true
}, {
id: '4',
parentId: '2',
name: "Passwords.rtf",
isDirectory: false,
expanded: true
}, {
id: '5',
parentId: '2',
name: "About.xml",
isDirectory: false,
expanded: true
}, {
id: '6',
parentId: '2',
name: "Managers.rtf",
isDirectory: false,
expanded: true
}, {
id: '7',
parentId: '2',
name: "ToDo.txt",
isDirectory: false,
expanded: true
}, {
id: '8',
name: "Images",
isDirectory: true,
expanded: true
}, {
id: '9',
parentId: '8',
name: "logo.png",
isDirectory: false,
expanded: true
}, {
id: '10',
parentId: '8',
name: "banner.gif",
isDirectory: false,
expanded: true
}, {
id: '11',
name: "System",
isDirectory: true,
expanded: true
}, {
id: '12',
parentId: '11',
name: "Employees.txt",
isDirectory: false,
expanded: true
}, {
id: '13',
parentId: '11',
name: "PasswordList.txt",
isDirectory: false,
expanded: true
}, {
id: '14',
name: "Description.rtf",
isDirectory: false,
expanded: true
}, {
id: '15',
name: "Description.txt",
isDirectory: false,
expanded: true
}];
