Die Anforderung war einen HTML-Container verschieben zu können. Ich wollte dafür aber nicht gleich überfrachte Frameworks wie jQuery UI benutzen. Auch wollte ich kein möglichst flexibles Plugin draus machen, da ich es wirklich nur für diesen einen Zweck brauchte. Deswegen habe ich Chris Coyiers Lösung abgewandelt.
Hier ist das Endprodukt:
$('#myDraggableElement').on("mousedown", function(e) {
e.preventDefault(); // disable selection
var $this = $(this).addClass('is-dragging'),
zIndex = $this.css('z-index'),
offset = $this.offset(),
posX = e.pageX - offset.left,
posY = e.pageY - offset.top;
$this.css('z-index', 1000).parents().on("mousemove", function(e) {
if ($this.hasClass('is-dragging')) {
$this.offset({
left: e.pageX - posX,
top: e.pageY - posY
}).on("mouseup", function() {
$this.css('z-index', zIndex).removeClass('is-dragging');
});
}
});
});
