Fancytree (Javascript) Toggle ON/OFF dnd5

Question

我正在尝试打开/关闭拖放功能。我正试图通过切换"；dnd5"；来自extensions属性，但它不起作用。

我想在不拖放的情况下初始化树。然后，用户可以单击一个按钮来切换拖放功能。

*注意："；dnd5"；是我正在使用的唯一扩展。

树按计划初始化，但当我单击按钮时，拖放功能从未激活。我做错了什么？

var $tree = $("#tree-drag");
function toggleDnD(isOn) {
if (isOn) {
$mainTree.extensions.push("dnd5");
}  
else {
if ($mainTree.extensions.length > 0)
$mainTree.extensions.pop();
}
}
$("#btn-dnd-on").on("click", function() { toggleDnD(true); });
$("#btn-dnd-off").on("click", function() { toggleDnD(false); });
var $mainTree = $tree.fancytree({
extensions: [],
autoScroll: true,
init: function (event, data) {
},
dnd5: {
dragStart: function (node, data) {
data.effectAllowed = "all";
data.dropEffect = data.dropEffectSuggested;
return true;
},
dragEnter: function (node, data) {
return true;
},
dragOver: function (node, data) {
data.dropEffect = data.dropEffectSuggested;
},
dragDrop: function (node, data) {
var newNode,
transfer = data.dataTransfer,
sourceNodes = data.otherNodeList,
mode = data.dropEffect;
data.originalEvent.preventDefault();
if (data.hitMode === "after") {
sourceNodes.reverse();
}
if (data.otherNode) {
var sameTree = data.otherNode.tree === data.tree;
if (mode === "move") {
console.log("moved");                                
var _node = data.otherNode;
var childId = data.otherNode.data.id;
var parentId = data.node.data.id;
$(_node).attr({
"data-child": childId,
"data-parent": parentId
});
data.otherNode.moveTo(node, data.hitMode);

//Assign the parent ID to the object. This will tell the system that a category has changed its home and needs its parent to be updated.
$("ul.ui-fancytree-source").find("li[data-id='" + childId + "']").attr("data-parent", parentId);

}
else {
newNode = data.otherNode.copyTo(node, data.hitMode);
if (mode === "link") {
newNode.setTitle("Link to " + newNode.title);
}
else {
newNode.setTitle("Copy of " + newNode.title);
}
}
}
else if (data.otherNodeData) {
node.addChild(data.otherNodeData, data.hitMode);
}
else if (data.files.length) {
for (var i = 0; i < data.files.length; i++) {
var file = data.files[i];
node.addNode({ title: "'" + file.name + "' (" + file.size + " bytes)" }, data.hitMode);
}
}
else {
node.addNode({ title: transfer.getData("text"), }, data.hitMode);
}
node.setExpanded();
$(".fancytree-statusnode-nodata").parent("li[role='treeitem']").remove();
}
},
dblclick: function (event, data) {
// Get the next table
var id = data.node.data.id;
getTable(id);
setTreeNode(id);
node.setExpanded(true);
node.setActive(true);
}
});

Answer 1

初始化后，修改extensions列表将不起作用。

相反，您可以维护一个全局标志，并在dragStart事件中返回false：

dnd5: {
dragStart: function (node, data) {
if( dndDisabled ) { return false; }
data.effectAllowed = "all";
data.dropEffect = data.dropEffectSuggested;
return true;
},

另请参阅文档。