0

次の関数を使用して、ハンドル付きの div をドラッグします。

問題は、一部のブラウザでは、ドラッグと同時にテキストが選択され、ページ上で強調表示されることです..

それを修正する方法はありますか？

function enableDragging (ele) {
    var dragging = dragging || false,
        x, y, Ox, Oy,
        current;
        enableDragging.z = enableDragging.z || 1;
    var grabber = document.getElementById("myHandle");
    grabber.onmousedown = function (ev) {
        ev = ev || window.event;
        var target = ev.target || ev.srcElement;
        current = target.parentElement;
        dragging = true;
        x = ev.clientX;
        y = ev.clientY;
        Ox = current.offsetLeft;
        Oy = current.offsetTop;
        current.style.zIndex = ++enableDragging.z;
        console.log(dragging);

        document.onmousemove = function(ev) {

            ev = ev || window.event;

            //pauseEvent(ev);         
            if (dragging == true) {
                var Sx = ev.clientX - x + Ox,
                    Sy = ev.clientY - y + Oy;
                current.style.top = Sy + "px";
                current.style.left = Sx + "px";
                document.body.focus();
                // prevent text selection in IE
                document.onselectstart = function () { return false; };
                // prevent IE from trying to drag an image
                ev.ondragstart = function() { return false; };                  
                return false;   
            }
        }
        document.onmouseup = function(ev) {
            //alert("stop");
            dragging && (dragging = false);
        }
    };
}    

function pauseEvent(e){
    if(e.stopPropagation) e.stopPropagation();
    if(e.preventDefault) e.preventDefault();
    e.cancelBubble=true;
    e.returnValue=false;
    return false;
}

ドラッグは次の方法で開始されます。

    var ele = document.getElementById("divWrapper");
    enableDragging(ele);
4

1 に答える 1

0

すみません、前回の投稿の 2 番目の質問を忘れていました。onmouseupただし、デフォルトも防止する必要があります。

document.onmouseup = function(ev) {
    ev = ev || window.event;
    dragging && (dragging = false);
    if (ev.preventDefault) {
        ev.preventDefault();
    } else {
        ev.cancelBubble=true;
        ev.returnValue=false;
    }
    return false;
}

編集

または、単にpauseEvent()関数を使用します。あなたのコードにはこれがあることに注意してください: ev.ondragstart = function () {...};. イベントハンドラを Event オブジェクトに割り当てても意味がありません。むしろ、documentまたはに割り当ててdocument.bodyください。またpauseEvent()、すべてのイベントハンドラー関数でもそれを使用します。

実行が に移動したときにこれらのイベントがすでに発生しているため、ハンドラーに移動document.onselectstartした方がよいようです。document.ondragstartonmousedownonmousemove()

于 2013-02-10T19:38:00.047 に答える