You can able to restrict to drag and drop files under folder only. These can be achieved by using ‘nodeDragStop’ and ‘nodeDragging’ event of TreeView.
import { enableRipple } from '@syncfusion/ej2-base';
import { TreeView } from '@syncfusion/ej2-navigations';
enableRipple(true);
// Hierarchical data source for TreeView component
let hierarchicalData: { [key: string]: Object }[] = [
{
nodeId: '01', nodeText: 'Music', icon: 'folder',
nodeChild: [
{ nodeId: '01-01', nodeText: 'Gouttes.mp3', icon: 'audio' }
]
},
{
nodeId: '02', nodeText: 'Videos', icon: 'folder',
nodeChild: [
{ nodeId: '02-01', nodeText: 'Naturals.mp4', icon: 'video' },
{ nodeId: '02-02', nodeText: 'Wild.mpeg', icon: 'video' },
]
},
{
nodeId: '03', nodeText: 'Documents', icon: 'folder',
nodeChild: [
{ nodeId: '03-01', nodeText: 'Environment Pollution.docx', icon: 'docx' },
{ nodeId: '03-02', nodeText: 'Global Water, Sanitation, & Hygiene.docx', icon: 'docx' },
{ nodeId: '03-03', nodeText: 'Global Warming.ppt', icon: 'ppt' },
{ nodeId: '03-04', nodeText: 'Social Network.pdf', icon: 'pdf' },
{ nodeId: '03-05', nodeText: 'Youth Empowerment.pdf', icon: 'pdf' },
]
},
{
nodeId: '04', nodeText: 'Pictures', icon: 'folder', expanded: true,
nodeChild: [
{
nodeId: '04-01', nodeText: 'Camera Roll', icon: 'folder', expanded: true,
nodeChild: [
{ nodeId: '04-01-01', nodeText: 'WIN_20160726_094117.JPG', image: 'https://ej2.syncfusion.com/demos/src/treeview/images/employees/9.png' },
{ nodeId: '04-01-02', nodeText: 'WIN_20160726_094118.JPG', image: 'https://ej2.syncfusion.com/demos/src/treeview/images/employees/3.png' },
]
},
{ nodeId: '04-02', nodeText: 'Wind.jpg', icon: 'images' },
{ nodeId: '04-03', nodeText: 'Stone.jpg', icon: 'images' },
]
},
{
nodeId: '05', nodeText: 'Downloads', icon: 'folder',
nodeChild: [
{ nodeId: '05-01', nodeText: 'UI-Guide.pdf', icon: 'pdf' },
{ nodeId: '05-02', nodeText: 'Tutorials.zip', icon: 'zip' },
{ nodeId: '05-03', nodeText: 'Game.exe', icon: 'exe' },
{ nodeId: '05-04', nodeText: 'TypeScript.7z', icon: 'zip' },
]
},
];
// Render the TreeView with image icons
let treeObj: TreeView = new TreeView({
fields: { dataSource: hierarchicalData, id: 'nodeId', text: 'nodeText', child: 'nodeChild', iconCss: 'icon', imageUrl: 'image' },
sortOrder: 'Ascending',
allowDragAndDrop: true,
nodeDragStop: dragStop,
nodeDragging: nodeDrag
});
treeObj.appendTo('#tree');
function nodeDrag(args: DragAndDropEventArgs): void {
if (args.droppedNode != null && args.droppedNode.getElementsByClassName('folder') && args.droppedNode.getElementsByClassName('folder').length === 0) {
args.dropIndicator = 'e-no-drop';
}
}
function dragStop(args: DragAndDropEventArgs): void {
if (args.droppedNode != null && args.droppedNode.getElementsByClassName('folder') && args.droppedNode.getElementsByClassName('folder').length === 0) {
args.cancel = true;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Essential JS 2 for TreeView </title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for TreeView UI Control" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/21.1.35/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/21.1.35/ej2-navigations/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<div id='treeparent'>
<div id="tree"></div>
</div>
</div>
<style>
.e-treeview .e-list-img {
width: 25px;
height: 25px;
}
/* Loading sprite image for TreeView */
.e-treeview .e-list-icon {
background-repeat: no-repeat;
background-image: url(https://ej2.syncfusion.com/demos/src/treeview/images/icons/file_icons.png);
height: 20px;
}
/* Specify the icon positions based upon class name */
.e-treeview .e-list-icon.folder {
background-position: -10px -552px;
}
.e-treeview .e-list-icon.docx {
background-position: -10px -20px;
}
.e-treeview .e-list-icon.ppt {
background-position: -10px -48px;
}
.e-treeview .e-list-icon.pdf {
background-position: -10px -104px;
}
.e-treeview .e-list-icon.images {
background-position: -10px -132px;
}
.e-treeview .e-list-icon.zip {
background-position: -10px -188px;
}
.e-treeview .e-list-icon.audio {
background-position: -10px -244px;
}
.e-treeview .e-list-icon.video {
background-position: -10px -272px;
}
.e-treeview .e-list-icon.exe {
background-position: -10px -412px;
}
</style>
</body>
</html>#container {
visibility: hidden;
}
#loader {
color: #008cff;
height: 40px;
width: 30%;
position: absolute;
font-family: 'Helvetica Neue','calibiri';
font-size: 14px;
top: 45%;
left: 45%;
}
#treeparent {
display: block;
max-width: 350px;
max-height: 350px;
margin: auto;
overflow: auto;
border: 1px solid #dddddd;
border-radius: 3px;
}