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 處理程序連接到元素...