jquery - How to drag a node from a div and drop it on to a JStree? (jstree version: 3.0.4) -
jquery - How to drag a node from a div and drop it on to a JStree? (jstree version: 3.0.4) -
using next code, drag jstree node , drop on div, , after that, node deleted jstree. storing removed jstree nodes in mapofremovednodes object, node id key , node object value. now, want move node jstree. finish code:
<!doctype html> <head> <title>jstree</title> <link rel="stylesheet" href="css/style.css" /> <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"> <script src="js/jquery.js"></script> <script src="js/jstree.js"></script> <script> var mapofremovednodes = new object(); $(function() { var arraycollection = [ {"id": "animal", "parent": "#", "text": "animals"}, {"id": "device", "parent": "#", "text": "devices"}, {"id": "dog", "parent": "animal", "text": "dogs", "icon": "fa fa-file-o"}, {"id": "lion", "parent": "animal", "text": "lions", "icon": "fa fa-file-o"}, {"id": "mobile", "parent": "device", "text": "mobile phones", "icon": "fa fa-file-o"}, {"id": "lappy", "parent": "device", "text": "laptops", "icon": "fa fa-file-o"}, {"id": "daburman", "parent": "dog", "text": "dabur man", "icon": "fa fa-long-arrow-right"}, {"id": "dalmation", "parent": "dog", "text": "dalmatian", "icon": "fa fa-long-arrow-right"}, {"id": "african", "parent": "lion", "text": "african lion", "icon": "fa fa-long-arrow-right"}, {"id": "indian", "parent": "lion", "text": "indian lion", "icon": "fa fa-long-arrow-right"}, {"id": "apple", "parent": "mobile", "text": "apple iphone 6", "icon": "fa fa-long-arrow-right"}, {"id": "samsung", "parent": "mobile", "text": "samsung note ii", "icon": "fa fa-long-arrow-right"}, {"id": "lenevo", "parent": "lappy", "text": "lenevo", "icon": "fa fa-long-arrow-right"}, {"id": "hp", "parent": "lappy", "text": "hp", "icon": "fa fa-long-arrow-right"} ]; $('#jstree').jstree({ "plugins": ["dnd", "types"], 'core': { 'check_callback': true, 'data': arraycollection, 'themes': { 'dots': false } }, "types": { "root": { "icon": "/static/3.0.8/assets/images/tree_icon.png", "valid_children": ["default"] }, "default": { "valid_children": ["default", "file"] }, "file": { "icon": "fa fa-file-o", "valid_children": [] } } }); $(document).on('dnd_start.vakata', function(e, data) { console.log('started dragging node jstree'); }); $(document).on('dnd_move.vakata', function(e, data) { console.log('moving node jstree div'); }); $(document).on('dnd_stop.vakata', function(e, data) { console.log('dropped node on div'); if (data.event.target.id === 'dragtarget') { var nodedragged = $(data.element).clone(); $('#dragtarget').append(nodedragged); var ref = $('#jstree').jstree(true); var nodetodelete = $('#' + data.data.nodes[0]); mapofremovednodes[data.data.nodes[0]] = nodetodelete.clone(); // including clone of node in map ref.delete_node(nodetodelete); // deleting node on jstree after dropping on div console.log(getremovednode(data.data.nodes[0])); } }); }); function getremovednode(key) { homecoming mapofremovednodes[key]; } </script> </head> <body> <div id="jstree" style="float: left; width: 500px"></div> <div id="dragtarget" style="float: left; width: 750px; height: 750px; background-color: skyblue; text-align: center"> <h3>dropped items</h3> </div> <script> document.getelementbyid('dragtarget').addeventlistener('dragstart', function(evt) { console.log("the 'dragstart' event fired."); console.log(evt.target); evt.datatransfer.setdata('text', evt.target.textcontent); }, false); document.addeventlistener("dragover", function(evt) { console.log("the 'dragover' event fired."); evt.preventdefault(); // prevent default behavior in order enable dropping. }, false); document.getelementbyid('jstree').addeventlistener("drop", function(evt) { console.log("the 'drop' event on jstree fired."); evt.preventdefault(); // prevent default action open link elements. console.log(evt); // // do: how drop node (dragged div) jstree structure?? // }, false); </script> </body> </html> let's have drag node div , drop anywhere on jstree. here, how move node div jstree , place in proper hierarchy under parent node?
got solution!! posting answer, might useful others facing similar kind of issues.
<!doctype html> <head> <title>jstree</title> <link rel="stylesheet" href="css/style_jstree.css" /> <link href="fonts/font-awesome-4.2.0/css/font-awesome.min.css" rel="stylesheet"> <script src="js/jquery.js"></script> <script src="js/jstree.js"></script> <script> var arraycollection; $(function() { arraycollection = [ {"id": "animal", "parent": "#", "text": "animals", "data": {"name": "quick"}}, {"id": "device", "parent": "#", "text": "devices"}, {"id": "dog", "parent": "animal", "text": "dogs", "icon": "fa fa-file-o"}, {"id": "lion", "parent": "animal", "text": "lions", "icon": "fa fa-file-o"}, {"id": "mobile", "parent": "device", "text": "mobile phones", "icon": "fa fa-file-o"}, {"id": "lappy", "parent": "device", "text": "laptops", "icon": "fa fa-file-o"}, {"id": "daburman", "parent": "dog", "text": "dabur man", "icon": "fa fa-long-arrow-right"}, {"id": "dalmation", "parent": "dog", "text": "dalmatian", "icon": "fa fa-long-arrow-right"}, {"id": "african", "parent": "lion", "text": "african lion", "icon": "fa fa-long-arrow-right"}, {"id": "indian", "parent": "lion", "text": "indian lion", "icon": "fa fa-long-arrow-right", "data": {"lastname": "silver"}}, {"id": "apple", "parent": "mobile", "text": "apple iphone 6", "icon": "fa fa-long-arrow-right"}, {"id": "samsung", "parent": "mobile", "text": "samsung note ii", "icon": "fa fa-long-arrow-right"}, {"id": "lenevo", "parent": "lappy", "text": "lenevo", "icon": "fa fa-long-arrow-right"}, {"id": "hp", "parent": "lappy", "text": "hp", "icon": "fa fa-long-arrow-right"} ]; $('#jstree').jstree({ "plugins": ["dnd", "types"], 'core': { 'check_callback': true, 'data': arraycollection, 'themes': { 'dots': false, 'responsive': true } }, "types": { "root": { "icon": "/static/3.0.8/assets/images/tree_icon.png", "valid_children": ["default"] }, "default": { "valid_children": ["default", "file"] }, "file": { "icon": "fa fa-file-o", "valid_children": [] } } }); $(document).on('dnd_start.vakata', function(e, data) { //console.log('started dragging node jstree'); }); $(document).on('dnd_move.vakata', function(e, data) { //console.log('moving node jstree div'); }); $(document).on('dnd_stop.vakata', function(e, data) { if (data.event.target.id === 'dragtarget') { var jsonelement; var nodedragged = $(data.element).clone(); // $('#dragtarget').append(nodedragged); if (data.data.jstree && data.data.origin) { jsonelement = data.data.origin.get_node(data.element); var id = jsonelement.id; var icon = jsonelement.icon; var parent = jsonelement.parent; var parents = jsonelement.parents.join(); var text = jsonelement.text; var divelement = '<div data-id=\'' + id + '\' data-text=\'' + text + '\' data-icon=\'' + icon + '\' data-parent=\'' + parent + '\' draggable=true><i class=\'' + icon + '\'></i> ' + text + '</div>'; $('#dragtarget').append(divelement); arraycollection = arraycollection .filter(function(el) { homecoming el.id !== id; }); resfreshjstree(); } } }); }); function resfreshjstree() { $('#jstree').jstree(true).settings.core.data = arraycollection; $('#jstree').jstree(true).refresh(); } </script> </head> <body> <div id="jstree" style="float: left; width: 500px"></div> <div id="dragtarget" style="float: left; width: 750px; height: 750px; background-color: skyblue; text-align: center"> <h3>dropped items</h3> </div> <script> var draggeddivelement; document.getelementbyid('dragtarget').addeventlistener('dragstart', function(evt) { console.log("the 'dragstart' event fired."); var jsonelement = new object(); var divelement = evt.target; jsonelement.id = divelement.getattribute('data-id'); jsonelement.text = divelement.getattribute('data-text'); jsonelement.icon = divelement.getattribute('data-icon'); jsonelement.parent = divelement.getattribute('data-parent'); evt.datatransfer.setdata('jsonelement', json.stringify(jsonelement)); draggeddivelement = divelement; }, false); document.addeventlistener("dragover", function(evt) { console.log("the 'dragover' event fired."); evt.preventdefault(); // prevent default behavior in order enable dropping. }, false); document.getelementbyid('jstree').addeventlistener("drop", function(evt) { console.log("the 'drop' event on jstree fired."); evt.preventdefault(); // prevent default action open link elements. arraycollection.push(json.parse(evt.datatransfer.getdata('jsonelement'))); resfreshjstree(); if(draggeddivelement!==null){ draggeddivelement.innerhtml = ''; } }, false); </script> </body> </html> jquery jstree
Comments
Post a Comment