Question

我正在尝试使用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"];
            }
        }
    });
})

Answer 1

我发现问题在于对图标文件的引用以及正在使用的旧版本的jquery库。我仍然不确定为什么它不是IE的问题，而是Chrome。

我对错误引用图标文件导致问题的理论是，当Dynatree对象上没有渲染图标时，Chrome没有插入任何要点击的“像素地址”。我意识到这不是正确的术语，但这是我的理论。在IE中，它似乎不是一个问题。

当我在更正对图标文件的引用后呈现页面时，所有内容都按预期工作。

Dynatree onDragOver和onDrop在IE9中完美运行，但只在Chrome中间歇性地运行

1 个答案: