Das verschieben eines DIV-durch scrollen

Mir entwickelte sich eine richtige nav-dock style-Element mit einfach nur javascript.
Hier ist der link:

https://github.com/developerDoug/HtmlJavascriptDockInVS2010

Verwendung eines ui-plugin wäre am besten, wenn Sie überzeugen können, Ihre Kunden zu tun. Wenn nicht, was Sie brauchen, zu konzentrieren ist hanling mousedown-oder so etwas ähnliches bemerkt zu werden, dass der übergang hat begonnen. Das es Methoden zu konzentrieren, sind: mousedown, mousemove, mouseup.

Beispielsweise, wenn auf ein paar div-Sie erkennen, mousedown, Sie könnten eine Funktion aufzurufen, die im Grunde wäre Ihre beginDrag, mit x y Koordinaten, halten eine Referenz auf den start-Koordinaten, attachEvent (falls IE), addEventListener (für alle anderen Browsern).

ex:

//keep reference to drag div
_dragObj = new Object();

$("myDragDiv").mousedown(function(e) {
    dragBegin(e);
}

function dragBegin(e) {

    _dragObj = document.getElementById('myDragDiv');

    var x, y;

    if (navigator.userAgent.indexOf("MSIE") >= 0) {
        x = window.event.clientX + document.documentElement.scrollLeft + document.body.scrollLeft;
        y = window.event.clientY + document.documentElement.scrollTop + document.body.scrollTop;
    } else {
        x = e.clientX + window.scrollX;
        y = e.clientY + window.scrollY;
    }

    _dragObj.cursorStartX = x;
    _dragObj.cursorStartY = y;

    if (navigator.userAgent.indexOf("MSIE") >= 0) {
        document.attachEvent("onmousemove", dragContinue);
        document.attachEvent("onmouseup", dragEnd);
        window.event.cancelBubble = true;
        window.event.returnValue = false;
    } else {
        document.addEventListener("mousemove", dragContinue, true);
        document.addEventListener("mouseup", dragEnd, true);
        e.preventDefault();
    }
}

function dragContinue(e) {
    var x, y;

    var isIE = _browser.isIE;
    var isWebKitBased = _browser.isWebKitBased;

    if (navigator.userAgent.indexOf("MSIE") >= 0) {
        x = window.event.clientX + document.documentElement.scrollLeft + document.body.scrollLeft;
        y = window.event.clientY + document.documentElement.scrollTop + document.body.scrollTop;
    } else {
        x = e.clientX + window.scrollX;
        y = e.clientY + window.scrollY;
    }

    var distance = x - _dragObj.cursorStartX;

    distance = Math.abs(distance);

    //or top, bottom, right
    _dragObj.elNode.style.left = (_dragObj.elStartLeft + x - _dragObj.cursorStartX) + "px";

    if (navigator.userAgent.indexOf("MSIE") >= 0) {
        window.event.cancelBubble = true;
        window.event.returnValue = false;
    } else {
        e.preventDefault();
    }
}

function dragEnd() {
    if (navigator.userAgent.indexOf("MSIE") >= 0) {
        document.detachEvent("onmousemove", dragContinue);
        document.detachEvent("onmouseup", dragEnd);
    } else {
        document.removeEventListener("mousemove", dragContinue, true);
        document.removeEventListener("mouseup", dragEnd, true);
    }
}

InformationsquelleAutor developerdoug