0

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

1 回答 1

0

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

我关于为什么对图标文件的错误引用导致问题的理论是,当 Dynatree 对象上没有呈现任何图标时,Chrome 没有插入任何可供单击的“像素地址”。我意识到这不是正确的术语,但这是我的理论。在 IE 中,这似乎不是问题。

当我在更正对图标文件的引用后渲染页面时,一切都按预期工作。

于 2013-11-12T16:22:38.827 回答