Question

我已经在项目列表上设置了拖放，以便用户可以将项目拖放到预览窗格中并查看其内容。如预期的那样，光标将更改为预期的“重影”图像，并且一切正常。

以前，在同一应用程序中，我创建了自定义滚动条，这些滚动条通过将mousemove和mouseup嵌套在滚动条上的mousedown内而起作用。当鼠标移动时，页面滚动。仍然可以正常工作。

但是滚动后，预览系统的拖放光标被弄乱了：它不再更改为预期的光标和附加的幻像。

我怀疑滚动（在滚动条的“轨道”上上下拖动“ scrubber”）以某种方式触发了html5 d＆d系统。我尝试将e.preventDefault放在滚动条中的几乎所有位置都无效。 / p>

我猜想在滚动时需要以某种方式禁用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功能将保持激活状态，并且在视图中的任何位置滚动都将触发鼠标移动。

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

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

出乎意料！

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

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

HTML5拖放问题

1 个答案: