我正在尝试使用 Dynatree 插件实现拖放功能。它在 IE 9 中完全按预期工作。但是,在 Chrome 中,该功能是断断续续的。我已经从 Dynatree 网站下载了最新的 .js 文件,并且还使用了我引用的 jquery.js 版本。
起初,我认为在 Chrome 中,我声明的 onDragOver 和 onDrop 函数根本没有被调用。但是,当我插入控制台日志语句,然后启动正在呈现 Dynatree 对象的 MVC 项目时,我可以在 Chrome 开发人员工具控制台监视器中看到 onDragStart 函数总是被调用而没有失败,但是当我拖动鼠标时在“附加”节点周围,我只能让 onDragOver 函数在看似随机的位置触发。当我让 onDragOver 触发并实际“引用”或突出显示树中的其他节点之一时,onDrop 函数也可以工作。
具有讽刺意味的是,下面的代码在 IE9 中完美运行。我可以让它在 Chrome 中工作,但前提是我在 WebForms ASP.NET 项目中使用它。现在,我确定您在想,“为什么不在 WebForms 项目中使用它呢?”。这仍然是一种可能性(最后的手段),但是我们需要通过将更改保存到我们的数据库来完成,MVC 将在站点的其他方面工作得更好。下面的代码非常接近 Dynatree 主页上提供的示例之一。
感谢您的任何帮助,您可以提供。
更新:我发现并不是没有调用 onDragOver 和 onDrop 函数。当使用 MVC 在 Chrome 中查看时,dynatree 对您点击的确切位置非常挑剔和敏感。这可能完全是我的 json 字符串或 Chrome 上的某些设置的产物。我只是还不知道。如果我单击节点的左侧,我可以每次都选择它,并将其移动到我想要的位置。我必须非常具体地拖放它。在 Chrome 中,在 Web 表单模型中,您可以操作的“区域”似乎要大得多。?
$(document).ready(function () {
$("#OrgTree").dynatree({
initAjax: {
url: $('#Path').val()
},
dnd: {
onDragStart: function (node) {
/** This function MUST be defined to enable dragging for the tree.
* Return false to cancel dragging of node.
*/
//alert(node);
logMsg("tree.onDragStart(%o)", node);
return true;
},
onDragOver: function (node, sourceNode, hitMode) {
/** Return false to disallow dropping this node. * */
logMsg("tree.onDragOver(%o, %o, %o)", node, sourceNode, hitMode);
// Prevent dropping a parent below it's own child
if (node.isDescendantOf(sourceNode)) {
return false;
}
// Prohibit creating children in non-folders (only sorting allowed)
//if (!node.data.isFolder && hitMode === "over") { return "after"; }
},
onDrop: function (node, sourceNode, hitMode, ui, draggable) {
/** This function MUST be defined to enable dropping of items on
* the tree.
*/
logMsg("tree.onDrop(%o, %o, %o)", node, sourceNode, hitMode);
if (node.isDescendantOf(sourceNode)) {
return false;
}
//alert(node, sourceNode, hitMode);
//sourceNode.expand();
sourceNode.move(node, hitMode);
},
onDragEnter: function (node, sourceNode) {
/** sourceNode may be null for non-dynatree droppables.
* Return false to disallow dropping on node. In this case
* onDragOver and onDragLeave are not called.
* Return 'over', 'before, or 'after' to force a hitMode.
* Return ['before', 'after'] to restrict available hitModes.
* Any other return value will calc the hitMode from the cursor position.
*/
// Prevent dropping a parent below another parent (only sort
// nodes under the same parent)
// Allowing dropping *over* a node will create a child of that node
if (node.isDescendantOf(sourceNode)) {
return false;
}
return ["before", "after", "over"];
}
}
});
})