Jquery 将节点从jstree拖到外部div元素上,然后在删除时执行操作
我已经有了一个jstree,现在希望能够将某些类型的节点拖动到外部div元素(包含由highcharts生成的图表)。实际上,我不希望节点从树中删除,也不希望节点的副本。我只希望删除节点的操作使用节点的ID更新图表 我想我可以计算出图表更新位,但我发现这是一个用jstree拖放的过程,有点让人困惑。另外,我只希望某些类型的节点是可拖动的(任何具有rel=“ds”属性的节点) 我一直在努力,还没走多远。这就是我要做的:Jquery 将节点从jstree拖到外部div元素上,然后在删除时执行操作,jquery,drag-and-drop,jstree,Jquery,Drag And Drop,Jstree,我已经有了一个jstree,现在希望能够将某些类型的节点拖动到外部div元素(包含由highcharts生成的图表)。实际上,我不希望节点从树中删除,也不希望节点的副本。我只希望删除节点的操作使用节点的ID更新图表 我想我可以计算出图表更新位,但我发现这是一个用jstree拖放的过程,有点让人困惑。另外,我只希望某些类型的节点是可拖动的(任何具有rel=“ds”属性的节点) 我一直在努力,还没走多远。这就是我要做的: $("#statstree").jstree({ "json_
$("#statstree").jstree({
"json_data" : {
"ajax" : {
"url" : "test.json",
"data" : function (n) {
return { id : n.attr ? n.attr("id") : 0 };
},
"progressive_render" : true
}
},
"types" : {
"valid_children" : [ "root" ],
"types" : {
"folder" : {
"icon" : {
"image" : "images/folder.png"
},
"valid_children" : [ "default" ],
//"max_depth" : 2,
"hover_node" : true,
"show_checkboxes" : false
},
"default" : {
"icon" : {
"image" : "images/folder.png"
},
"valid_children" : [ "default" ]
},
"hover_node" : false
}
},
"themes" : {
"theme" : "classic",
"dots" : false,
"icons" : true
},
"core" : { "html_titles" : true },
"dnd" : {
"drop_target" : "#test_area",
"drop_finish" : function (data) {
if(data.o.attr("rel") === "ds") {
//update chart with new data here?
//using data.o.attr("id")
}
}
},
"crrm" : { move : { check_move : function (m) { return false; } } },
"plugins" : ["themes","json_data","dnd","ui","types","crrm"]
});
我在某处读到绑定“before.jstree”事件有助于阻止某些节点被拖动(还有crrm位)。但我认为我做错了。“开始拖动”似乎无权访问数据。args[0]:
$("#statstree").bind("before.jstree", function (e, data) {
if(data.func === "start_drag" && data.args[0].parent("li").attr("rel") != "ds") {
e.stopImmediatePropagation();
return false;
}
});
有人知道我如何完成这项任务吗
干杯:)
编辑:我已经研究出如何阻止非“ds”节点被丢弃到该区域:
"drag_check" : function (data) {
if(data.r.attr("rel") != "ds") {
return false;
}
return {
after : false,
before : false,
inside : true
};
}
我现在将完善我的问题:
如果我有多个drop_目标,如何获取目标的ID?“放弃目标”:“#测试区1,#测试区2”
编辑2
Doh,一边回答我的问题!我已经盯着这个看了很久了。我一下子想到了这一切:
数据。r.attr(“id”)
编辑3
现在唯一剩下的问题是,尽管所有没有rel=“ds”属性的节点都不能“删除”到外部div/chart中,但当它们悬停在允许的区域上时,仍然会显示一个jstree绿色勾号图标。有什么办法阻止这种情况发生吗?检查选项。呵呵。实际上我还有另一个编辑…:)我需要一个外部div元素的dnd,drag_检查不见了,你知道我如何在jstreev3.0中做到这一点吗?那么你解决了这个问题了吗?