senäh

17senäh und so…

Code Snippet Thumb

HTML/CSS/JS
25. Apr 2013
Kommentare: 0

Einfaches, selbstgebautes Drag&Drop für beliebige Elemente

Kategorien: HTML/CSS/JS | 25. Apr 2013 | Kommentare: 0

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');
      });
    }
  });
});

Demo gefällig?

Autor: Enno

Ich bin Enno. PHP ist mein Ding, aber auch alles Neue rund um die Themen HTML5, CSS3 & Co finde ich interessant. Ich mag es Leuten zu helfen und mein Wissen weiterzugeben. Sollte dir mein Beitrag gefallen haben, lass doch nen Kommentar da oder benutze einen der Social Buttons, um deinen Dank auszudrücken ;)