[jQuery] Drag&Drop-Plugin

Hallo Tutorianer,

ich bastle seit einiger Zeit an einem jQuery-Plugin, was das native Drag&Drop vereinfacht. Diejenigen unter euch, die sich schon einmal damit auseinander gesetzt haben, wissen selber, dass es dafür einige Event-Typen gibt, auf die man achten muss, obwohl man doch nur ein Element derart manipulieren will, dass es Daten per Drag&Drop entgegen nimmt. Damit nicht nur ich alleine davon einen Nutzen habe, möchte ich euch mein Plugin gerne zur Verfügung stellen.

Das Problem löse ich damit, indem man einfach nur das Plugin einem Element (oder mehreren) zuweisen muss, und dazu eine Callback-Funktion definiert. Alles andere löst das Plugin selber.

Javascript:

/*
 * LICENSE: "THE BEER-WARE LICENSE" (Revision 42)
 * <gregor.mitzka@gmail.com> wrote this file. As long as you retain this notice you
 * can do whatever you want with this stuff. If we meet some day, and you think
 * this stuff is worth it, you can buy me a beer in return Gregor Mitzka
 * 
 * @package      jQuery Drag&Drop-Plugin
 * [USER=136855]@author[/USER]       Gregor Mitzka <gregor.mitzka@gmail.com>
 * [USER=51092]@Copyright[/USER]    2013 (C) Gregor Mitzka
 * @version      1.0
 * [USER=60124]@license[/USER]      The Beer-Ware License
 */
(function ( $ ) {
  $.fn.drop = function ( handler, observe ) {
    if ( typeof handler !== 'function' ) {
      throw 'handler must be a function';
    }

    var $this = $( this );

    $( document ).off( 'dragstart dragend' ).on({
      'dragstart': function () {
        $( '[dropzone]' ).addClass( 'droppable-dragging' );
      },

      'dragend' : function () {
        $( '[dropzone]' ).removeClass( 'droppable-dragging droppable-hover' );
      }
    });
    
    var events = {
      'dragover': function ( e ) {
        e.preventDefault();
        e.stopPropagation();
        
        return false;
      },

      'dragenter': function ( e ) {
        e.preventDefault();
        e.stopPropagation();
        
        $this.removeClass( 'droppable-dragging' ).addClass( 'droppable-hover' );
        return false;
      },

      'drop': function ( e ) {
        var data = e.originalEvent.dataTransfer;
        var ret;

        e.preventDefault();
        e.stopPropagation();

        // will return the data for "text/plain" if you try to stringify the Clipboard object
        data.valueOf = function () {
          return this.getData( 'text/plain' );
        };
        // call the callback function for the drop event
        // mostly you will not return any value, but if you do, we will recognize it
        $( '[dropzone]' ).removeClass( 'droppable-dragging droppable-hover' );
        return ( ( ret = handler.call( e.target, data, e ) ) === undefined || !!ret );
      },

      'dragleave': function ( e ) {
        e.preventDefault();
        e.stopPropagation();
        
        $this.removeClass( 'droppable-hover' ).addClass( 'droppable-dragging' );
        return false;
      }
    };

    // observe the list of matched elements by the selector string if observe is true
    if ( observe == null || observe ) {
      $this.parent().delegate( this.selector, events );
    // bind only to the matching elements, that currently exist
    } else {
      $this.on( events );
    }

    return this;
  };
})( jQuery );

Ein Beispiel dafür könnt ihr hier finden.
Angewendet wird das Plugin wie folgt:

Javascript:

// 1. Argument: Callback-Funktion
// 2. Argument: Gibt an, ob auf neue Elemente, die hinzugefügt wurden und dem Auswahl-Pattern entsprechen, auch das Plugin angewendet werden soll: true für ja, ansonsten false. true ist voreingestellt.
$('div').drop(function (data, e) {
  // "data" enthält das Clipboard-Objekt, welches die übertragenen Daten enthält
  // "e" enthält das originale "drop"-Event, welches als jQuery-Event verpackt ist
  // "this" verweist auf das HTML-Element, auf welches die Daten abgelegt wurden
}, true);

Um anzuzeigen, auf welche Elemente etwas abgelegt werden kann, wird diesen während des Draggens die CSS-Klasse "droppable-dragging" hinzugefügt. Das Element, überwelchen sich der Mauszeiger gerade befindet, erhält die Eigenschaft "droppable-hover".

Falls ihr noch Fehler findet oder meint, dass ich etwas besser lösen könnte, etwas noch hinzufügen sollte oder irgendeinen anderen Vorschlag habt, was ich mit diesem Skript noch anfangen könnte, schreibt es mir bitte und ich werde versuchen es zu verarbeiten.

More resources from Parantatatam