HTML5 拖放问题

Question

我已经在项目列表上设置了拖放，以便用户可以将项目拖放到预览窗格中并查看其内容。 正如预期的那样，光标变为预期的“幽灵”图像，一切都按预期进行。

以前，在同一个应用程序中，我创建了自定义滚动条，通过在滚动条上的 mousedown 中嵌套 mousemove 和 mouseup 来工作。 随着鼠标移动页面滚动。 这仍然按预期工作。

然而，滚动后，预览系统的拖放光标被弄乱了：它不再更改为预期的光标和附加的重影图像。

我怀疑滚动的行为（在滚动条的“轨道”上下拖动“scrubber”以某种方式触发了 html5 d&d 系统。我尝试将 e.preventDefault 几乎放在滚动条中的任何地方都没有效果。

我猜想不知何故 html5 d&d 需要在滚动时禁用，或者误以为滚动条虽然不是真正的拖放，但实际上已经完成或重置了任何标志，或者满足了 d&d 系统所具有的任何期望一个完成的操作。

作为测试，我将 html5 d&d 用于滚动条（但由于拖动时光标的变化看起来很奇怪），正如预期的那样，项目预览 d&d 与所有预期的光标行为都能正常工作。

关于如何重置以便 d&d 光标正确显示的任何建议将不胜感激。

代码位于 Edge Animate 框架中，以下是关键片段：

//scrollbar code

Symbol.bindElementAction(compId, symbolName, "${scrubber}", "mouseenter", function(sym, e) {
    sym.$("scrubber").attr("draggable", "false");
    return false; ///
});

Symbol.bindElementAction(compId, symbolName, "${scrubber}", "mousedown", function(sym, e) {
    e.preventDefault();
    e.stopPropagation();
    var scrubber = sym.$("scrubber");
    var mouseButton = e.button;
    if(mouseButton == 2){
        return false;
    }
    var doMoveAtEnd = false;
    canDrag = true;
    sym.$("Hithilite").show();
    var barProp = voodoo.scrollbarCalc("", "vertical", "verticalscroll.scrubber.init");

    getStage().getSymbol("Domtop").$("Domtopreduced").mousemove(function(e){
        e.preventDefault();
        e.stopPropagation();
        if(mouseButton !== 2 && canDrag){
            isDrag = true;
            var pos = 0;
            var currOffsetY = scrubber.offset().top;
            var possibleY = e.pageY;
            if(possibleY > currOffsetY){
                scrollDir = "up";
            }
            else if(possibleY < currOffsetY){
                scrollDir = "down";
            }
            pos = pos + possibleY;
            if(pos !== 0){
                scrollProp = voodoo.scrollbarCalc(e, "vertical", "verticalscroll.scrubber.2");
                voodoo.viewScroll(e, "mousedrag", scrollDir, scrollProp[7]);
            }
            pos = 0;
            }
        }
        return false;
    });
    getStage().getSymbol("Domtop").$("Domtopreduced").mouseup(function(e){
        e.preventDefault();
        e.stopPropagation();
        var mouseButton = e.button;
        if(mouseButton !== 2){
            isDrag = false;
            canDrag = false;
            setVar("scrubber", "");
        }
        return false;
    });
    return false;
});
//Preview drag & drop
//drag source
sym.$("hotspotfocus").attr("draggable", "true");

Symbol.bindElementAction(compId, symbolName, "${hotspotfocus}", "dragstart", function(sym, e) {
    if(getVar("hardpreview") == "off"){
        return false;
    }
    setVar("dragDropItem", e.target.id);
    setVar("isDrag", true);
});
//drag target
Symbol.bindElementAction(compId, symbolName, "${hpvslot1}", "dragover", function(sym, e) {
    e.preventDefault();
    e.stopPropagation();
    if(getVar("hpvslot1") === ""){
        sym.$("hpvslot1BG").fadeTo(0, 0.5);
    }
    else{
        sym.$("hpvslot1BG").show();
    }
    return false; ///
});

Symbol.bindElementAction(compId, symbolName, "${hpvslot1}", "drop", function(sym, e) {
    e.preventDefault();
    e.stopPropagation();
    sym.$("hpvslot1BG").fadeTo(0, 1);
    voodoo.hpvDrop("hpvslot1");
    return false; ///
});


Symbol.bindElementAction(compId, symbolName, "${hpvslot1}", "dragleave", function(sym, e) {
    e.stopPropagation();
    e.preventDefault();
    if(getVar("hpvslot1") !== ""){
        sym.$("hpvslot1BG").hide();
    }
    else{
        sym.$("hpvslot1BG").fadeTo(0, 1);
    }
});

Symbol.bindElementAction(compId, symbolName, "${hpvslot1}", "dragend", function(sym, e) {
    e.preventDefault();
    sym.$("hpvslot1BG").hide();
});

Answer 1

无意中找到了答案。

事实证明，一旦滚动条的 mousemove 被滑块激活（即第一次通过拖动滚动），滚动条的 mousemove 功能将保持激活状态，并且在视图中的任何位置滚动都会触发 mousemove。

这种无意触发破坏了 html5 拖放中正确的光标响应。

通过在较低级别停止传播，可以防止这种情况（即使鼠标按钮未在滑块上“按下”，也会在滚动条中触发事件）。

意外！

本质上，这里的问题是，即使有问题的 mousemove 处理程序嵌套在一种情况下，除非触发封闭的 mousedown，否则您不会认为它会被触发，但它在第一次触发后始终被触发，无论鼠标是否按下。

答案是只有一个 mousemove 处理程序连接到元素...