如何解决FancytreeJavascript切换开/关dnd5
我正在尝试打开/关闭拖放功能。我试图通过在extensions属性中切换“ dnd5”来做到这一点,但是它不起作用。
我想在不拖放的情况下初始化树。然后,用户可以单击按钮来切换拖放功能。
*注意:“ 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);
}
});
解决方法
初始化后将无法修改extensions
列表。
相反,您可以维护一个全局标志,并在dragStart事件中返回false:
dnd5: {
dragStart: function (node,data) {
if( dndDisabled ) { return false; }
data.effectAllowed = "all";
data.dropEffect = data.dropEffectSuggested;
return true;
},
另请参阅the docs。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。