dojo - 鼠标（x，y） - 拖放 - 挫败感

Question

我正在尝试使用 dojo.dnd 拖动对象，但希望头像位于与对象相同的位置（相对于鼠标），

即如果一个人单击对象的中间，则鼠标光标将位于头像的中间。

我得到了各种奇怪的结果。 如果我将函数连接到 body.onmousemove dnd 的放置部分会失败。

我怎样才能让它工作？

Answer 1

从这个意义上说，Dojo 的 DND 是有限的。头像的位置偏移，因此移动事件不会被代表拖动的节点捕获。在这种情况下，典型的源/目标将不起作用。我创建了一个混合“mover/source”dnd 示例，可以帮助您完成您想要完成的任务：

http://svn.dojotoolkit.org/src/demos/trunk/beer/src/dnd.js

基本上，我们将“mousedown”连接到某个节点。当它被触发时，我们直接在页面中原始节点所在的位置创建该节点的克隆（请参阅 _dragStart 函数）。然后，我们注册临时的 mousemove 和 mouseup 事件监听器。 mousemove 是一个针对速度进行优化的紧凑函数。只需设置“头像”（克隆）相对于 e.pageX 和 e.pageY（标准化事件对象部分）的顶部/左侧位置。

当 mouseup 被触发时，我们会断开 mouseup 和 mousemove 事件（this._listeners）。在示例中，“overTarget”函数仅返回 true。您可以将此逻辑更改为您需要的任何内容，以确保当前 pageX/pageY 坐标位于您选择的边界框内（源/目标，无论您喜欢什么）。

在示例中，我让它动画回到“源”的原始 x/y，或者将其转换为 dojo.dnd.Moveable（它是克隆节点），从源中创建一种标记工厂。您可能只想使用它来将任何数据添加到您的购物车，并销毁头像。

希望这有帮助。

Answer 2

暂时...（因为我不知道如何实现混合js）

我已经利用了取消事件并将鼠标坐标与页面上的每个源对象进行比较，以确定要删除哪一个进入。

页面中的 JS 现在：

var mchandle;
dojo.require("dojo.dnd.Source");
var lastSrc;
function init() {
    dojo.subscribe("/dnd/drop", function(source, nodes, iscopy) {
        dojo.byId("msg").innerHTML += " drop";
        dojo.disconnect(mchandle);
    });
    dojo.subscribe("/dnd/start", function(source, nodes, iscopy) {
        lastSrc = source;
        mchandle = dojo.connect(dojo.doc, "onmousemove", "mouseCoords");
        dojo.byId("msg").innerHTML = "start";
        var px = 0;
        var py = 0;
        for (var i = 0; i < nodes.length; i++) {
            var nPos = dojo._abs(nodes[i]);
            px = nPos.x > px ? nPos.x : px;
            py = nPos.y > py ? nPos.y : py;
        }
        dojo.dnd.manager().OFFSET_X = 0 - (source._lastX - px);
        dojo.dnd.manager().OFFSET_Y = 0 - (source._lastY - py);


    });
    dojo.subscribe("/dnd/cancel", function() {
        dojo.byId("msg").innerHTML += " cancel";
        dojo.query("[dojotype=\"dojo.dnd.Source\"]").forEach(function(node, index, array) {
            var elemXY = dojo.coords(node);
            if ( //in source box
            (elemXY.x <= document.mouse.x && document.mouse.x <= (elemXY.x + elemXY.w)) && (elemXY.y <= document.mouse.y && document.mouse.y <= (elemXY.y + elemXY.h))) {
                var s = new dojo.dnd.Source(node, null);
                s.insertNodes(true, lastSrc.getSelectedNodes(), null, null);
            }
        });
        dojo.disconnect(mchandle);
        lastSrc = null;
    });
}
dojo.addOnLoad(init);
function mouseCoords(ev) {
    var px, py;
    ev = ev || window.event;
    if (ev.pageX || ev.pageY) {
        px = ev.pageX;
        py = ev.pageY;
    } else {
        px = ev.clientX + dojo.body().scrollLeft - dojo.body().clientLeft;
        py = ev.clientY + dojo.body().scrollTop - dojo.body().clientTop;
    }
    document.mouse = {
        "x": px,
        "y": py
    };
}

仍然出现错误。
我拖动到目标（一切都很好。）
我从目标拖动，屏幕上粘着一个重复的头像。
萤火虫报告错误。

_5.getItem(_6[i].id) is undefined
} catch (e) {\r\n                                 dojo.js (line 203)

你能提供任何帮助吗？