Drag & Drop

Computerbenutzer halten die Drag & Drop-Funktion mittlerweile für selbstverständlich. Sie können sie auf mehrere Arten im Browser aktivieren. Windows Internet Explorer 9 und frühere Versionen von Internet Explorer unterstützen das dataTransfer-Objekt und die Ereignisse, um Bilder, Links und Text zu ziehen. Internet Explorer 10 unterstützt das draggable-Attribut, durch das jedes HTML-Element, auf das das Attribut angewendet wird, auf der Seite gezogen werden kann. In Internet Explorer 10 wurde dem dataTransfer-Objekt zudem das files-Attribut hinzugefügt, das das Verschieben einer oder mehrerer Dateien per Drag & Drop vom Desktop auf eine Webseite ermöglicht.

Das draggable-Attribut

Mit dem draggable-Attribut können Sie das Ziehen auf der Seite für jedes HTML-Element aktivieren. Das Attribut bietet die folgenden Zustände:

SchlüsselwortBeschreibung

true

Der Inhalt kann gezogen werden.

false

Der Inhalt kann nicht gezogen werden.

auto

Der Inhalt nimmt das Standardverhalten des Browsers an (Text, Links und Bilder können gezogen werden, andere Elemente nicht).

 

Das folgende Codebeispiel ermöglicht Benutzern das Ziehen von Elementen auf dem Bildschirm.


<button id="mybutton" draggable="true">Drag me</button>
<img src="photo.png" draggable="true" />
<div id="mydiv" draggable="true">Moveable text</div>


Wenn Benutzer ein ziehbares Element ziehen, stellt Internet Explorer 10 ein Geisterbild bereit, das sich während des Ziehens mit dem Cursor bewegt. Das draggable-Attribut wird nicht geerbt, das heißt, untergeordnete Elemente eines Elements sind nicht automatisch ziehbar.

Das files-Attribut für das dataTransfer-Objekt

Durch das hinzugekommene files-Attribut für das dataTransfer-Objekt können Sie Dateien aus Ordnern oder vom Desktop auf eine Webseite ziehen. Dies kann die Erstellung von Programmen vereinfachen, beispielsweise eines E-Mail-Clients, in dem Sie Anlagen in eine Nachricht ziehen oder einer Galerieseite Fotos hinzufügen können.

Der folgende Ereignislistener und die "dropHandler"-Funktion zeigen, wie Sie einen Bereich erstellen, in den Benutzer eine Datei ziehen können. Das Ziel kann ein div, ein img oder ein anderes Element auf der Seite sein. Die Ereignisse dragover und drop verwenden die "doNothing"-Funktion, um die Standardbehandlung und das Bubbling des Ereignisses zu verhindern, die sonst zu unvorhersehbaren Ergebnissen führen könnten.


// this function runs when the page loads to set up the drop area
function init() 
{
  // Set the drop-event handlers.
  var dropArea = document.getElementById("dropspot");
  dropArea.addEventListener("drop", dropHandler, false);
  dropArea.addEventListener("dragover", doNothing, false);
}
function dropHandler(event)
{
  // Use our doNothing() function to prevent default processing. 
  doNothing(event);
  // Get the file(s) that are dropped.
  var filelist =  event.dataTransfer.files;
  if (!filelist) return;  // if null, exit now
  var filecount = filelist.length;  // get number of dropped files

  if (filecount > 0) 
  {
    // Do something with the files.         
  } 
}
// Prevents the event from continuing so our handlers can process the event.
function doNothing(event)
{
  event.stopPropagation();
  event.preventDefault();
}


API-Referenz

dataTransfer
DragEvent
draggable

Beispiele und Lernprogramme

HTML5-Drag & Drop-Beispiel

Demos für die Internet Explorer-Testversion

Magnetic Poetry

IEBlog-Beiträge

HTML5-Drag & Drop in IE10 PPB2

Spezifikation

HTML5: Abschnitt 7.7

 

 

Anzeigen:
© 2014 Microsoft