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 ziehen zu können. Unter Internet Explorer 10 wurde die Unterstützung für das Draggable-Attribut und die DataTransfer.files-Eigenschaft hinzugefügt, um das Verschieben einer oder mehrerer Dateien per Drag & Drop vom Desktop auf eine Webseite zu ermöglichen.

Mit Microsoft Edge wird die Unterstützung für das aktuellste Drag & Drop-Modell des W3C eingeführt. Dabei dient ein DataTransferItemList-Objekt (auf das über die DataTransfer.items-Eigenschaft zugegriffen wird) als Datenspeicher für den Ziehvorgang. Die oben erwähnten älteren Drag & Drop-APIs werden ebenfalls weiter unterstützt. Weitere Informationen finden Sie unter Neues und altes Drag & Drop.

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.

files-Attribut für das DataTransfer-Objekt

Dank des hinzugekommenen files-Attributs 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-Element, ein img-Element 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. Dies könnte sonst zu unvorhersehbaren Ergebnissen führen.


// 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.items
DataTransferItem
DataTransferItemList
DataTransfer
DragEvent
draggable

Demos für die Internet Explorer-Testversion

Magnetic Poetry

IEBlog-Beiträge

IE11: Touch-Browsing für das moderne Web und die Zukunft
HTML5-Drag & Drop in IE10 PPB2

Spezifikation

HTML 5.1: Abschnitt 5.7

 

 

Anzeigen: