A Simple HTML5 Drag-and-Drop Example
Posted by Sergey Krauchenia on March 28, 2012 04:24 pm under Development Edit
In this article, we’ll learn how to implement a very simple example of an HTML5 drag-and-drop in action. We’ll define a draggable image that can be dropped into a circle. You’ll see this example and say “That’s so easy!”. But don’t rush to any conclusions. In more complex use cases, it’s not such a piece of cake anymore and can become a real pain in the neck!
The Complete Source Code
<!DOCTYPE html> <html lang="en"> <head> <title>Basic drag and drop example</title> <style> .drop-div { width: 150px; height: 150px; border: 3px dashed #224163; background-color: #AABACC; margin-top: 15px; border-radius: 80px; text-align: center; } [draggable=true] { -khtml-user-drag: element; -webkit-user-drag: element; -khtml-user-select: none; -webkit-user-select: none; cursor: pointer; margin-top: 50px; } </style> <script> function dragStartHandler(event) { event.dataTransfer.setData('Text', 'text'); } function dropHandler(event) { preventDefaults(event); if (!event.target) { event.target = event.srcElement } event.target.appendChild(document.getElementById('draggable-img')); } function dragOverHandler(event) { preventDefaults(event); } function preventDefaults(event) { if (event.preventDefault) { event.preventDefault(); } try { event.returnValue = false; } catch (exception) {} } </script> </head> <body> <img draggable="true" ondragstart="dragStartHandler(event);" class="draggable-img" id="draggable-img" src="http://png-1.findicons.com/files/icons/305/cats_2/48/dot_mac_logo_graphite.png"/> <div class="drop-div" ondragover="dragOverHandler(event);" ondrop="dropHandler(event)" id="drop-div"></div> </body> </html> |
Expand the source code
What It Looks Like
The code will produce something like this in the browser:
You can then click on the globe, drag the globe to inside the circle, and drop it to produce this:
Let’s look at some parts of the code in more detail.
The Object to Drag
<img draggable="true" ondragstart="dragStartHandler(event);" class="draggable-img" id="draggable-img" src="http://png-1.findicons.com/files/icons/305/cats_2/48/dot_mac_logo_graphite.png"/> |
You’ll notice we explicitly define the img element to be draggable even though that’s the default for these elements. We do this, because we will have to use this for a trick in CSS to make the example work in Safari. We have to add the following CSS rule to take advantage of the explicit setting of draggable:
[draggable=true] { -khtml-user-drag: element; -webkit-user-drag: element; -khtml-user-select: none; -webkit-user-select: none; cursor: pointer; margin-top: 50px; } |
Also, you need to define a handler for the dragstart event, so the browser knows what to do when it is being dragged. In our example, the handler uses event.dataTransfer.setDate, which allows you to pass data between events. I set some dummy parameters for this method inside the event handler, event.dataTransfer.setData('Text', 'text'), just to let Chrome work properly.
There are two more events that you could also use:
- drag fires every time the mouse is moved while the object is being dragged.
- dragend fires when the user releases the mouse button while dragging an object.
The Drop Target
<div class="drop-div" ondragover="dragOverHandler(event);" ondrop="dropHandler(event)" id="drop-div"></div> |
The next step is defining the place where we want to drop the element that we are dragging. To do this, we just need to create a document node and attach appropriate events to it. If you want an object to become a drop target, at a minimum, you must attach the dragover and drop events. The drop event will not fire unless you cancel the default behavior of the event target’s dragover event (event.preventDefault()), so you’ll need to do this to get a workable drag-and-drop feature.
We only use two of these in our example, but a drop target can fire four possible events:
- dragenter fires when a draggable object is first dragged inside an object.
- dragover fires every time a draggable object is moved inside an object. Note: if you want to allow the draggable object to be dropped inside this object, you must cancel the default behavior of this event handler.
- dragleave fires when a draggable object is dragged out of an object.
- drop fires when a draggable object is dropped into an object.
In our next article in this series about drag-and-drop, I’ll describe a more complex use case.
I am a high school teacher trying to develop a project for my web design class where students create a robot using html5 by dragging and dropping its arms and legs together. What would your code look like using multiple objects using a single drop zone?
What I’m really looking for is a very simple drag and drop function where the draggable objects stay where you drop them anywhere inside a drop zone.
Thanks!