Firefox und andere Mozilla-Produkte unterstützen eine Anzahl der Features von den Ziehen-und-Ablegen-Funktionen (drag and drop). Dies Features erlauben dem Nutzer auf ein Element zu klicken, dann die Maustaste halten um das Element an eine anderen Ort zu ziehen und die Maustaste dort los lassen um es dort Abzulegen. Eine lichtdurchlässige Darstellung des Elements, das gezogen wird, folgt dem Mauszeiger während der Durchführung. Der Ablegeort kann auch in einer anderen Applikation sein. Webseiten, Erweiterungen und XUL-Applikationen können diese Funktionalität nutzen zum Anpassen ihrer Produkte.
Die Grundlagen des Ziehen und Ablegen
Vor Beginn der Zieh-Operation wird eine Anzahl an Information vorausgesetzt:
- die Objekte, die gezogen werden, können verschiedene Fomate besitzen. Zum Beispiel enthalten Textdaten eine Zeichenfolge, die gezogen wird. Für weitere Informationen finden Sie unter Drag Data.
- das Drag-Feedbackbild. Dieses erscheint neben dem Mauszeiger während der Drag-Operation. Dieses Bild kann angepasst werden, standardmäßig wird es aus gezogenenen Element generiert. Um mehr über das Drag-Feedback-Bild zu lernen gehen sie auf Setting the Drag Feedback Image.
- die Zieh-Effekte, die erlaubt sind: das Kopieren, das Bewegen und das Verbinden (link). Sie finden unter Drag Effects weitere Details.
Mozilla und Firefox unterstützen eine Anzahl von Features die nicht in dem Standard des Ziehen und Ablegens definiert sind. Diese Features erlauben das Ziehen von mehren Items und das Ziehen von Nicht-Zeichenketten. Für weitere Information, siehe Dragging and Dropping Multiple Items.
Eine Liste aller üblicherweise für Drag&Drop verwendeten Datentypen finden Sie unter Recommended Drag Types. Für die folgenden Datentypen ist eine Schnellübersicht inklusive der Best-Practices verfügbar:
See DataTransfer for a reference to the DataTransfer object.
Drag events
A number of events are used which are fired during various stages of the drag and drop operation. Note that only drag events are fired; mouse events such as mousemove are not fired during a drag operation.
The dataTransfer property of all drag events holds data about the drag and drop operation.
- dragstart
- Fired on an element when a drag is started. The user is requesting to drag the element the dragstart event is fired at. During this event, a listener would set information such the drag data and image to be associated with the drag. For information about this, see Starting a Drag Operation.
- dragenter
- Fired when the mouse is first moved over an element while a drag is occuring. A listener for this event should indicate whether a drop is allowed over this location. If there are no listeners, or the listeners perform no operations, then a drop is not allowed by default. This is also the event to listen to if you want to provide feedback that a drop is allowed such as displaying a highlight or insertion marker. For information about this, see Specifying Drop Targets.
- dragover
- This event is fired as the mouse is moved over an element when a drag is occuring. Much of the time, the operation that occurs during a listener will be the same as the dragenter event. For information about this, see Specifying Drop Targets.
- dragleave
- This event is fired when the mouse leaves an element while a drag is occuring. Listeners should remove any highlighting or insertion markers used for drop feedback.
- drag
- This event is fired at the source of the drag, that is, the element where dragstart was fired, during the drag operation.
- drop
- The drop event is fired on the element where the drop was occured at the end of the drag operation. A listener would be responsible for retrieving the data being dragged and inserting it at the drop location. This event will only fire if a drop is desired. It will not fire if the user cancelled the drag operation, for example by pressing the Escape key, or if the mouse button was released while the mouse was not over a valid drop target. For information about this, see Performing a Drop.
- dragend
- The source of the drag will receive a dragend event when the drag operation is complete, whether it was successful or not. See Finishing a Drag for more information.