|
Title: Drag and Drop to Tree Post by: Gumby on May 22, 2014, 04:52:55 AM I would like to drag something (not a tree node) to a tree and fire the onDrop action. I am trying to follow the example from the treegrid-dnd, but something much simpler and applied to a tree instead of treegrid would be better if possible.
Appreciate all suggestions! Title: Re: Drag and Drop to Tree Post by: Gumby on May 26, 2014, 01:29:22 AM Maybe I have not asked the right question. I am trying to add an 'onDrop' function to my tree, but it does not fire when I drop a 'draggable' div or img (which are not tree nodes) onto it. How can I get this to work?
Title: Re: Drag and Drop to Tree Post by: stworthy on May 26, 2014, 03:55:45 AM You may need to use droppable on the tree manually. Please refer to http://www.jeasyui.com/demo/main/index.php?plugin=Draggable&theme=default&dir=ltr&pitem=
Title: Re: Drag and Drop to Tree Post by: Gumby on May 26, 2014, 06:13:00 AM OK, I am building off that demo as it seems simpler than the treegrid. If I have this code:
$('folderlist').tree({ url: './agent_json.html', onClick: function(node) { alert("Clicked: " + node.text); } }); Where do I attach the .droppable? I tried this: $('folderlist').tree({ url: './folder_json.html', onClick: function(node) { alert("Clicked: " + node.text); } }).droppable({ onDrop:function(e,source){ alert("Dropped"); } }); but this did not work, dropping things there does nothing. Title: Re: Drag and Drop to Tree Post by: stworthy on May 26, 2014, 09:04:25 AM If you want to drop something on the whole tree, try this:
Code: $('#folderlist').droppable({http://www.jeasyui.com/demo/main/index.php?plugin=Draggable&theme=default&dir=ltr&pitem=Shopping%20Cart Title: Re: Drag and Drop to Tree Post by: Gumby on May 27, 2014, 12:42:02 AM I can get the entire div that the tree is in to respond to onDrop events, but I want to get the individual tree nodes (file folders) to fire the onDrop so that I can retrieve the node-id of the item dropped on.
If I drop on the div, I get an alert OK, but if I change from $('target') to the tree $('folderlist') as the drop target, the drop event does not fire. Here is my code: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Drag Drop Tree Nodes - jQuery EasyUI Demo</title> <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css"> <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/demo/demo.css"> <link rel="stylesheet" href="http://www.jeasyui.com/css/main.css" type="text/css" /> <link rel="stylesheet" href="http://www.jeasyui.com/css/demo1.css" type="text/css" /> <script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery-1.8.0.min.js"></script> <script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script> <script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.edatagrid.js"></script> <script type="text/javascript" src="http://www.jeasyui.com/easyui/datagrid-detailview.js"></script> <script type="text/javascript" src="http://www.jeasyui.com/easyui/datagrid-groupview.js"></script> <script type="text/javascript" src="http://www.jeasyui.com/easyui/datagrid-bufferview.js"></script> <script type="text/javascript" src="http://www.jeasyui.com/easyui/datagrid-scrollview.js"></script> <body> <h2>Drag and Drop on Tree</h2> <div class="target" style="height: 500px; width: 300px; border:1px solid black;"> <span>Folder List</span> <ul class="folderlist"></ul> </div> <div class="dragitem" style="position:absolute; left:320px; top:50px; border:3px solid red; height:30px; width:110px; padding: 10px;" draggable="true"> Please drag me! </div> <script> $(function(){ $('.dragitem').draggable({ revert:true, proxy:'clone', onStartDrag:function(){ $(this).draggable('options').cursor = 'not-allowed'; $(this).draggable('proxy').css('z-index',10); }, onStopDrag:function(){ $(this).draggable('options').cursor='move'; } }); $('.target').droppable({ onDrop:function(e,source) { alert("Drag source: " + source.attributes[0].nodeValue); } }); $('.folderlist').tree({ url: './treedata.json', method:'get', onClick: function(node) { alert("Clicked " + node.text); }, onExpand: function(node) { alert("Expanded " + node.text); }, onCollapse: function(node) { alert("Collapsed " + node.text); }, onDrop: function(target, source, point) { alert("Dropped on " + node.text); } }); }); </script> </body> </html> |