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>
