drag-and-drop-stack.json

{"index.html":"<html><head><script src=\"//npmci.syncfusion.com/production/demos/treeview/drag-and-drop/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n    <link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n    <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n    <style>\n            body{\n                touch-action:none;\n            }\n        </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"col-lg-12 control-section custom-tree\">\n    <div class=\"col-lg-4 tree1-data\">\n        <h4>TreeView-1</h4>\n        <div class=\"content\">\n            <div id=\"tree1\"></div>\n        </div>\n    </div>\n    <div class=\"col-lg-4 tree2-data\">\n        <h4>TreeView-2</h4>\n        <div class=\"content\">\n            <div id=\"tree2\"></div>\n        </div>\n    </div>\n    <div class=\"col-lg-4 tree3-data\">\n        <h4>ListView</h4>\n        <div class=\"content\">\n            <div id=\"list\" class=\"e-droppable\"></div>\n        </div>\n    </div>\n    <div id=\"overlay\">\n    </div>\n</div>\n\n\n\n</div></body></html>","index.js":"{{ripple}}\n    // Render the first TreeView by mapping its fields property with data source properties\n    var tree1Obj = new ej.navigations.TreeView({\n        fields: { dataSource:  window.productTeam1, id: 'id', text: 'name', child: 'child' },\n        allowDragAndDrop: true,\n        nodeDragStop: onDragStop\n    });\n    // Render the second TreeView by mapping its fields property with data source properties\n    tree1Obj.appendTo('#tree1');\n    var tree2Obj =  new ej.navigations.TreeView({\n        fields: { dataSource:  window.productTeam2, id: 'id', text: 'name', child: 'child' },\n        allowDragAndDrop: true,\n        nodeDragStop: onDragStop\n    });\n    tree2Obj.appendTo('#tree2');\n    // Render the ListView with custom template\n    var listData = [];\n    var listObj = new ej.lists.ListView({\n        dataSource: [],\n        cssClass: 'custom-list',\n        template: '<div><span>${text}</span><span id=${iconId} class=${class}></span></div>',\n    });\n    listObj.appendTo('#list');\n    // Drop the dragged TreeView node into ListView\n    var id = 1;\n    function onDragStop(event) {\n        var targetEle = ej.base.closest(event.target, '.e-droppable');\n        targetEle = targetEle ? targetEle : event.target;\n        // Check the target as ListView or not\n            if (targetEle && targetEle.classList.contains('custom-list')) {\n                event.cancel = true;\n                var newData = [];\n                if (event.draggedNode.classList.contains('e-active')) {\n                    var selNodes = this.selectedNodes;\n                    for (var i = 0, len = selNodes.length; i < len; i++)    {\n                        var nodeEle = document.querySelector('[data-uid=\"' + selNodes[i] + '\"]').querySelector('.e-list-text');\n                        var nodeText = nodeEle.textContent;\n                        var newNode = { id: 'l' + id, text: nodeText, class: 'custom-delete', iconId: 'i' + id };\n                        id++;\n                        newData.push(newNode);\n                    }\n                }\n                else {\n                    var text = 'text';\n                    var nodeText1 = event.draggedNodeData[text];\n                    var newNode1 = { id: 'l' + id, text: nodeText1, class: 'custom-delete', iconId: 'i' + id };\n                    id++;\n                    newData.push(newNode1);\n                }\n                   // Add collection of node to ListView\n                listObj.addItem(newData, undefined);\n            }\n        }\n    // Add the custom action for delete icon in ListView\n    document.getElementById('list').addEventListener('mousedown', function (event) {\n        if (event.target.classList.contains('custom-delete')) {\n            var node = ej.base.closest(event.target, 'li');\n            listObj.removeItem(node);\n        }\n    });\n    document.getElementById('overlay').addEventListener('mousedown', function (event) {\n        document.getElementById('overlay').style.display = 'none';\n    });\n\n"}