Home > HTML5, Web > HTML5 Drag & Drop API

HTML5 Drag & Drop API

Unlike Canvas, the Drag & Drop API implementation isn’t consistent across different browsers.

In general, drag & drop works like this…

  • Define an object as being draggable
    • <img src=”cat.jpg” draggable>
    • links and images are draggable by default. IE restricts draggable elements to links and images (hrefs only).
    • Draggable elements can be copied, moved, or linked.
  • Define a drop target
    • <image class=”droptarget” ondragenter=”dragEnterHandler(event)” ondragover=”dragOverHandler(event)” ondrop=”dropHandler(event)”>
    • ondragleave is optional
    • dataTransfer.setData(“text/plain”)
    • dataTransfer.getData(“text”)
  • Use the API to handle the interaction between the two.


Categories: HTML5, Web Tags: ,
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: