Implementing Drag and Drop (^) ❘ 291
When two or more operations are supported by the effectAllowed property, the second or third
operation is typically invoked by holding down a key on the keyboard.
The system drag-and-drop clipboard is also set in the dragstart event. The clipboard is set by fi rst
retrieving the outerHTML() of the element. Then the HTML is copied to the clipboard and identi-
fi ed on the clipboard by the MIME type. In this case, both of the MIME types text/plain and
text/html are set. Setting the MIME types allows other applications on your computer to work
with the data that you copy to the system clipboard. For example, after copying the HTML to
the clipboard in the dragstart event, you can now drag and drop elements outside the browser
window to other applications. Any application that supports text/html or text/plain can work
with the data copied to the clipboard. You can drag and drop from the browser to a text editor,
including editors that only support the text/plain MIME type. You can drag and drop between
completely different browsers.
A try / catch exception differentiates between using the setData() method with Internet Explorer’s
method and the HTML5 standard method. IE supports just two options: 'Text' and 'URL'. All the
other browsers use a MIME type. Using an exception automatically switches off to the IE method
when using a MIME type fails and throws an error.
The next event that you attach is the dragend event.
.on(
'dragend.finder',
function(event)
{
if ($('div.finderDirectoryDrop').length)
{
$(this).removeClass('finderDirectoryDrop');
$(this).remove();
}
}
)
The dragend event is fi red when the drag has completed, and it is fi red on the element that was
dragged. There is an issue with the dragend event that is diffi cult or outright impossible to work
with. There is no way of knowing when a drag is completed to an acceptable drop zone when a drag
and drop is executed from the browser window to another browser window or an outside applica-
tion. One potential workaround involves sending an AJAX request to the server from the side receiv-
ing the drop and then using web sockets to listen for that drop to occur on the side where the drag
originates. But that approach is way over the top for this simple demonstration of the drag-and-
drop API.
For drag and drops that originate and terminate in the same browser window, the dragend event
looks for the existence of a
element is detected, that is an indication that a drag and drop was completed on an acceptable drop
zone, which means that the element dragged can be removed from the DOM. Because the element
is removed from the DOM, this makes the default action of a drag and drop move. If you were to
implement a copy action, it would then, of course, be desirable to keep the original element. Such an
action might be implemented by holding down the Option (Mac) or Ctrl (Windows) key when doing
a drag and drop. You’d look for the Option/Alt key by checking whether event.altKey evaluates to
http://www.it-ebooks.info