Draggable Div mit jQuery, wie angeklickt Offset des Elements anwenden?

Question

Titel könnte etwas verwirrend sein, werde ich erklären. Ich habe mit jQuery ein ziehbares div gemacht (nicht jQuery UI ziehbar). Dies ist der Code:

let target = null; 

this.el.on('mousedown', (ev) => { 
    target = this.el; 
}).on('mouseup', (ev) => { 
    target = null; 
}); 

$(document.body).on('mousemove', 'div', (ev) => { 
    if(target) { 
     this.x = ev.pageX; 
     this.y = ev.pageY; 

     this.update(); // update css 
    } 
}); 

Code ist ziemlich einfach, und es funktioniert gut. Das Problem ist, wenn ich von der Mitte oder wo, nicht links oben ziehe, das Element immer der Cursorkoordination folgt, so dass immer die linke obere Ecke des Elements dort platziert wird, wo ich es gezogen habe. Ja, es ist richtig, weil ich das gemacht habe, aber ich möchte das Element dorthin bewegen, wo ich es schleppe.

Es ist schwer zu erklären, also werde ich einen einfacheren geben. Wenn es eine Box (div) in (0,0) und eine Größe von 5x5 gibt und die Box durch Anklicken von (0,0) bis (10,10) bewegt, sollte das Ziel (10,10) sein. Aber wenn ich die Box durch Ziehen (2.5.2.5) nach (10,10) verschiebe, muss das Ziel (12,5,12,5) sein, nicht (10,10).

Aber in meinem Code ist das Ziel (10,10), nicht (12,5,12,5), weil der Offset vom Klickpunkt bei der Übersetzung nicht angewendet wird. Wenn Sie immer noch nicht verstehen, was mein Problem ist, sehen Sie bitte jquery-ui's draggable example. Das möchte ich genau machen.

Ich weiß, was das Problem ist, aber alle meine versuchte wird nicht funktionieren, also brauche ich hier wenig Hilfe. Jeder Rat wird sehr geschätzt!

Beispiel ist here!

Answer 1

sind einfach die offsetX und offsetY Werte aus dem mousedown Ereignisse in der Berechnung, indem es aus den pageX und pageY im mousemove Handler subtrahiert wird.

$(document).ready(function() { 
 
    function DraggableElement() { 
 
    this.x = 0; 
 
    this.y = 0; 
 
    this.width = 100; 
 
    this.height = 100; 
 

 
    this.el = $('<div></div>') 
 
    .addClass('box') 
 
    .appendTo($('#playground')); 
 

 
    this.update(); 
 

 
    var self = this; 
 
    var target = null; 
 
    var offsetX = 0; 
 
    var offsetY = 0; 
 

 
    this.el.on('mousedown', function(ev) { 
 
     offsetX = ev.offsetX; 
 
     offsetY = ev.offsetY; 
 
     target = self.el; 
 
    }).on('mouseup', function() { 
 
     target = null; 
 
    }); 
 

 
    $(document.body).on('mousemove', 'div', function(ev) { 
 
     if(target) { 
 
     self.x = ev.pageX - offsetX; 
 
     self.y = ev.pageY - offsetY; 
 
     self.update(); 
 
     } 
 
    }); 
 
    } 
 
    DraggableElement.prototype.update = function() { 
 
    this.el.css({ 
 
     top: this.y + 'px', 
 
     left: this.x + 'px', 
 
     width: this.width + 'px', 
 
     height: this.height + 'px' 
 
    }) 
 
    }; 
 

 
    var el = new DraggableElement(); 
 
});

* { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
#playground { 
 
    background-color: #eee; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
.box { 
 
    position: absolute; 
 
    background-color: red; 
 
    cursor: pointer; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="playground"></div>