在两个 Fancetree 之间拖放
Drag & Drop between two Fancetrees
有没有办法组合 2 个花式树,花式树 A 是一组固定的配置项,花式树 B 是一个配置文件,花式树 A 中的项目可以拖放到花式树 B 而不会消失在树中A. 在 Fancytree B 中也应该可以拖放。
我已经搜索了一段时间,但没有找到我要找的东西,所以也许有人知道如何做到这一点!
绝对可以使用标准功能来 drag/drop 来自不同树甚至标准 jQuery Draggables
.
的节点
基本上你用的一样API
$("#tree").fancytree({
extensions: ["dnd"],
...
dnd: {
...
dragStart: function(node, data) {
if( data.originalEvent.shiftKey ){
console.log("dragStart with SHIFT");
}
// allow dragging `node`:
return true;
},
dragEnter: function(node, data) {
// Prevent dropping a parent below another parent (only sort
// nodes under the same parent)
/* if(node.parent !== data.otherNode.parent){
return false;
}
// Don't allow dropping *over* a node (would create a child)
return ["before", "after"];
*/
return true;
},
dragDrop: function(node, data) {
if( !data.otherNode ){
// It's a non-tree draggable
var title = $(data.draggable.element).text() + " (" + (count)++ + ")";
node.addNode({title: title}, data.hitMode);
return;
}
data.otherNode.moveTo(node, data.hitMode);
}
}
});
示例浏览器包含 Examples - Test - Drag'n'Drop
下的演示
有没有办法组合 2 个花式树,花式树 A 是一组固定的配置项,花式树 B 是一个配置文件,花式树 A 中的项目可以拖放到花式树 B 而不会消失在树中A. 在 Fancytree B 中也应该可以拖放。
我已经搜索了一段时间,但没有找到我要找的东西,所以也许有人知道如何做到这一点!
绝对可以使用标准功能来 drag/drop 来自不同树甚至标准 jQuery Draggables
.
基本上你用的一样API
$("#tree").fancytree({
extensions: ["dnd"],
...
dnd: {
...
dragStart: function(node, data) {
if( data.originalEvent.shiftKey ){
console.log("dragStart with SHIFT");
}
// allow dragging `node`:
return true;
},
dragEnter: function(node, data) {
// Prevent dropping a parent below another parent (only sort
// nodes under the same parent)
/* if(node.parent !== data.otherNode.parent){
return false;
}
// Don't allow dropping *over* a node (would create a child)
return ["before", "after"];
*/
return true;
},
dragDrop: function(node, data) {
if( !data.otherNode ){
// It's a non-tree draggable
var title = $(data.draggable.element).text() + " (" + (count)++ + ")";
node.addNode({title: title}, data.hitMode);
return;
}
data.otherNode.moveTo(node, data.hitMode);
}
}
});
示例浏览器包含 Examples - Test - Drag'n'Drop