Einfache drag-and-drop-code

Im Kampf mit scheinbar eine einfache javascript-übung, verfassen einer Vanille-drag-and-drop. Ich glaube ich bin einen Fehler zu machen, mit meinem "addeventlisteners', hier ist der code:

var ele = document.getElementsByClassName ("target")[0];
var stateMouseDown = false;
//ele.onmousedown = eleMouseDown;
ele.addEventListener ("onmousedown" , eleMouseDown , false);

function eleMouseDown () {
    stateMouseDown = true;
    document.addEventListener ("onmousemove" , eleMouseMove , false);
}

function eleMouseMove (ev) {
    do {
        var pX = ev.pageX;
        var pY = ev.pageY;
        ele.style.left = pX + "px";
        ele.style.top = pY + "px";
        document.addEventListener ("onmouseup" , eleMouseUp , false);
    } while (stateMouseDown === true);
}

function eleMouseUp () {
    stateMouseDown = false;
    document.removeEventListener ("onmousemove" , eleMouseMove , false);
    document.removeEventListener ("onmouseup" , eleMouseUp , false);
}

InformationsquelleAutor Kayote | 2013-08-25

11

Hier ein jsfiddle mit ihm arbeiten: http://jsfiddle.net/fpb7j/1/

Gab es 2 wichtigsten Fragen, die erste ist die Verwendung von onmousedown, onmousemove und onmouseup. Ich glaube, diese sind nur zur Verwendung mit angeschlossenen Veranstaltungen:
```
document.body.attachEvent('onmousemove',drag);
```
während mousedown, mousemove und mouseup sind für Ereignis-Listener:
```
document.body.addEventListener('mousemove',drag);
```
Das zweite Problem war die do-while-Schleife in der event-Funktion. Diese Funktion wird jedesmal aufgerufen, wenn die Maus bewegt wird, ein pixel, so dass die Schleife nicht notwendig ist:
```
var ele = document.getElementsByClassName ("target")[0];
ele.addEventListener ("mousedown" , eleMouseDown , false);

function eleMouseDown () {
    stateMouseDown = true;
    document.addEventListener ("mousemove" , eleMouseMove , false);
}

function eleMouseMove (ev) {
    var pX = ev.pageX;
    var pY = ev.pageY;
    ele.style.left = pX + "px";
    ele.style.top = pY + "px";
    document.addEventListener ("mouseup" , eleMouseUp , false);
}

function eleMouseUp () {
    document.removeEventListener ("mousemove" , eleMouseMove , false);
    document.removeEventListener ("mouseup" , eleMouseUp , false);
}
```
Durch die Art und Weise, die ich zu treffen hatte das Ziel, die position absolute für Sie zu arbeiten.

Danke für die ausführliche Antwort. Ich war mit dem Tun, Während für mousemove während mousedown aktiv ist, sonst sollte es nicht laufen... wenn ich Sie aktivieren die Do-While-Schleife, Firefox zum Stillstand kommt, obwohl.
Ich habe Sie verstanden, obwohl es wird nicht notwendig sein, wegen wie oft die mousemove Ereignis ruft eleMouseMove()
Ich aktualisiert es ein wenig für meine Anforderung. Es kann hilfreich sein, für andere auch so jsfiddle.net/kjwLe9bq "Freigabe".
Dies ist von lange her, aber es ist erwähnenswert (wie der code in die Letzte Bemerkung zeigt), dass die Ereignis-listener für das Ereignis mouseup sollte Hinzugefügt werden, in der eleMouseDown Funktion, nicht in eleMouseMove; die letztere ist genannt viel, und Sie nicht wollen, um das hinzufügen eines mouseup-Hörer jedes mal, wenn der Benutzer bewegt die Maus.
Version zu vermeiden, springen Sie auf die erste Maus verschieben: jsfiddle.net/fpb7j/308

InformationsquelleAutor iRector

können Sie versuchen, diese Geige zu, http://jsfiddle.net/dennisbot/4AH5Z/

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>titulo de mi pagina</title>
<style>
    #target {
        width: 100px;
        height: 100px;
        background-color: #ffc;
        border: 2px solid blue;
        position: absolute;
    }
</style>
<script>
   window.onload = function() {
        var el = document.getElementById('target');
        var mover = false, x, y, posx, posy, first = true;
        el.onmousedown = function() {
            mover = true;
        };
        el.onmouseup = function() {
            mover = false;
            first = true;
        };
        el.onmousemove = function(e) {
            if (mover) {
                if (first) {
                    x = e.offsetX;
                    y = e.offsetY;
                    first = false;
                }
                posx = e.pageX - x;
                posy = e.pageY - y;
                this.style.left = posx + 'px';
                this.style.top = posy + 'px';
            }
        };
   }
</script>
</head>
<body>
    <div id="target" style="left: 10px; top:20px"></div>
</body>
</html>

Warum verwenden Sie offsetX/Y?
Stoppen Sie die draggable springt der Mauszeiger. Ich bekomme es.

InformationsquelleAutor dennisbot

Habe ich nur ein einfaches ziehen.

Es ist ein one-liner Verwendung, und es behandelt Dinge wie den offset der Maus zur linken oberen Ecke des Elements, onDrag/onStop Rückrufe und SVG-Elemente ziehen

Hier ist der code.

//simple drag
function sdrag(onDrag, onStop) {
    var startX = 0;
    var startY = 0;
    var el = this;
    var dragging = false;

    function move(e) {
        el.style.left = (e.pageX - startX ) + 'px';
        el.style.top = (e.pageY - startY ) + 'px';
        onDrag && onDrag(el, e.pageX, startX, e.pageY, startY);
    }

    function startDragging(e) {
        if (e.currentTarget instanceof HTMLElement || e.currentTarget instanceof SVGElement) {
            dragging = true;
            var left = el.style.left ? parseInt(el.style.left) : 0;
            var top = el.style.top ? parseInt(el.style.top) : 0;
            startX = e.pageX - left;
            startY = e.pageY - top;
            window.addEventListener('mousemove', move);
        }
        else {
            throw new Error("Your target must be an html element");
        }
    }

    this.addEventListener('mousedown', startDragging);
    window.addEventListener('mouseup', function (e) {
        if (true === dragging) {
            dragging = false;
            window.removeEventListener('mousemove', move);
            onStop && onStop(el, e.pageX, startX, e.pageY, startY);
        }
    });
}

Element.prototype.sdrag = sdrag;

nehmen und zu nutzen:

document.getElementById('my_target').sdrag();

Können Sie auch verwenden, onDrag und onStop-Rückrufe:

document.getElementById('my_target').sdrag(onDrag, onStop);

Check my repo hier für mehr details:
https://github.com/lingtalfi/simpledrag

InformationsquelleAutor ling

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.