HTML and CSS Reference
In-Depth Information
Handle drag-and-drop related events.
If required, transfer data between the drag source and the drop target.
Enable Dragging for HTML Elements
The first step in using drag-and-drop in a page is to make one or more elements draggable. You do this by
setting the draggable attribute of an HTML element to true . For example, the following piece of markup
makes a <div> element draggable:
<div class="myclass" draggable="true">Some content</div>
Drag-and-Drop Events
Marking one or more DOM elements as draggable is just a part of the story. To actually make your drag-
and-drop functional and visually appealing to the end user, you need to handle certain events. These
events are listed in Table 9-7.
Table 9-7. Drag-and-Drop Events
Raised when the drag operation begins
Raised when an element is dragged
Raised when a draggable element is dragged and enters a valid drop
Raised when a draggable element that was dragged on a valid drop target
leaves the drop target
Raised when a draggable element is being dragged over a valid drop
Raised when a dragged element is dropped onto a valid drop target
Raised when the drag operation ends
Note that a drag source is an element that is being dragged, whereas a drop target is an element on
which a draggable element is to be dropped. Events from Table 9-7 such as dragstart , drag , and dragend
are handled by a drag source, whereas events such as dragenter , dragleave , dragover , and drop are
handled by a drop target. You can wire event handlers to these events using JavaScript, as shown in Listing
Listing 9-6. Wiring Event Handlers for Drag-and-Drop Events
$("div").each(function () {
this.addEventListener('dragstart', OnDragStart, false);
this.addEventListener('drop', OnDrop, false);
In this code, the dragstart and drop events of <div> elements are wired to OnDragStart and OnDrop
functions respectively using addEventListener() method.
Search WWH ::

Custom Search