CSS, HTML und Javascript mit {stil}

Javascript drag and drop

dragdrop Element ziehen und fallen lassen

Ein einfaches HTML-Attribut draggable erklärt ein Element zum »Drag and Drop«, damit es auf einen anderen Bereich der Webseite gezogen werden kann.

Das HTML-Attribut draggable="true" alleine reicht noch nicht. Dazu kommen die Javascript-Events für Drag & Drop.

Drag Drop braucht ein initiales Ereignis – z.B. wenn die Maus auf ein Element mit dem HTML-Attribut draggable klickt. Das draggable-Element muss für das drag- oder dragstart-Event registriert sein.

Drag and Drop-Events

Die Webseite braucht ein Element als »Dropzone«. Dropzone ist ein Bereich, auf den das draggable-Element gezogen werden kann.

  • dragstart()
  • drag()
  • dragover()
  • dragenter()
  • dragleave()
  • dragenter()
  • drop()

dataTransfer.setData / getData

Alle Drag-Events haben eine Eigenschaft dataTransfer. dataTransfer enthält die Daten, die bei einer Drag-und-Drop-Operation verschoben werden.

  • Die Methode event.dataTransfer.setData() setzt den Datentyp und die Werte der gezogenen Daten
  • Die Methode event.dataTransfer.getData() liest die Daten

dataTransfer.setData hat zwei Parameter: den Typ der Daten und den Wert der Daten, z.B. ("text/plain", "Dieser String zieht um").

Das div id="wetter" ist Dropzone für die Wettersymbole

<div id="wetter">
   <ul id="wetterliste"></ul>
</div>

In div-Elementen mit class="thumbs" und draggable="true" liegen die Bilder mit dem Text, der in die Dropzone übernommen wird.

<div class="thumbs" id="schnee" draggable="true">
   <img src="img/schnee.png" …  />
   <p>Schnee</p>
</div>

Drag & Drop Probleme mit Browsern?

Wenn Drag und Drop zu Problemen mit einzelnen Browsern führt: jquery-ndd.js ist eine Library, mit der die Unterschiede in der Implementierung von Drag & Drop in den Browsern eliminiert werden.

$('.thumbs')
   .bind('dragstart', function(evt) {
      evt.dataTransfer.setData('text',this.id);
})

$('#wetter')
   .bind('dragover', function(evt) {
      evt.preventDefault();
   })
   .bind('dragleave',function(evt) {
      evt.preventDefault();
   })
   .bind('dragenter',function(evt) {
      evt.preventDefault();
   })
	
   /** hier werden die Daten transferiert - die id **/
   .bind('drop',function(evt) {
      var id = evt.dataTransfer.getData('text'), 
         item= $('#' + id), 
         wetterliste = $('#wetterliste'), 
         prevFavItem = null;
      prevFavItem = null;
      prevFavItem = $('<li />', {
         text : $('p:first', item).text(),
         data : {id:id}
      }).appendTo(wetterliste);
   evt.stopPropagation();
   return false;
   })

Dropzone

    Schnee

    Blitze

    Sonne

    Mond

    Regen

    Wolken

    Drag & Drop auf TouchPads

    Während Drag und Drop in den Browsern (relativ) problemlos funktioniert: Auf iPad & Co. kommt es zu Komplikationen. Die Geste »Anfassen mit der Maus und ziehen« ist auf einem Touch Device schon durch Scrollen bei »Touch und Ziehen« belegt.

    Safari Developer Library: Handling Events

    Um das Scrollen auf dem iPad zu unterbinden:

    <meta name="viewport" content="width=900">
    <meta name="apple-mobile-web-app-capable" content="yes">
    

    Damit die Seite dann doch scrollen kann, setzt man den Block, in dem drag and drop ablaufen soll, in ein iframe.