Java Reference
In-Depth Information
Unfortunately, true drag‐and‐drop support has been elusive in web development, although some
JavaScript libraries came close. Though they enabled us to drag and drop elements within the
web page, they were limited by the capabilities, or lack of in this case, exposed by the browser;
interacting with dropped objects from the operating system was impossible.
But HTML5 changes that. For browsers that support it, you can now incorporate true drag‐and‐
drop capabilities within your web pages thanks to HTML5's Drag and Drop API. Not only can you
move elements around the page by dragging and dropping them, but the API enables you to drag
objects from the operating system, like files, and drop them in your page.
Note
Native drag and drop is only supported in IE10+, Chrome, Firefox,
Opera, and Safari.
making Content draggable
HTML5 makes it easy to create draggable content. By simply adding the
draggable
attribute to an
element and setting it to
true
, you tell the browser that the element can be used for drag and drop:
<div draggable="true">Draggable Content</div>
In most browsers, images, links, and selected text are draggable by default. Figure 10-4 shows some
selected text being dragged in Chrome.
figure 10-4
