Of all the technologies web developers need to master, it seems the one that causes the most confusion and potential problems is drag ‘n’ drop.
This is not a new technology, it’s been around for years, but many developers are still clinging to old jQuery based methods to implicate complicated (sometimes slow and inaccurate) drag-and-drop emulation.
Now that HTML5 includes a drag-and-drop API, you already have a very simple way to implement drag-and-drop without headaches.
UNDERSTANDING THE MECHANICS
Drag-and-drop is easy to understand. You have an object and a target. The goal is to allow the user to click on the object and drag it to the target, then your application needs to respond appropriately.
CREATE A WEB PAGE TEMPLATE
This is very simple, but we need to have a place to put all the code items. The most basic web page template you can create is:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
DEFINING A DRAGGABLE OBJECT
You’re probably expecting some complicated Java-like definition here, but actually it’s as easy as setting a “draggable” attribute on an element in your body section, like so:
<div>
<img id="dragMe" src="pic.jpg" draggable="true">
</div>
So as you can see, that part is really very simple. In fact, for some browsers you don’t even need to specify the attribute for some element types, but it’s still a good idea to do it anyway.
DEFINING THE TARGET
The target is a zone where your object can be dragged to. Again, it is quite simple, you just need to give the target a CSS ID attribute.
<div id="drop_target">
Bombs away!
</div>
ADD SOME CSS
We should make sure that everything looks the way it should look. Add the following CSS style info to your head section:
<style>
#drop_target{border:3px solid #000; padding:10px; height:100px; width:100px;}
#dragMe{height:50px;width:50px;}
</style>
IMPLEMENTING JS FUNCTIONS
This step is just to make sure your application is aware of the existence of the objects and that it should interact with them. You can take a complicated approach if you need to and create a series of event listeners, but you don’t really need anything that elaborate to handle a basic drag-and-drop.
Really we just need to define two functions that will handle all the moves, dragObject and dropObject.
<script>
var moved=false;
function dragObject(e){
e.dataTransfer.effectAllowed="move";
e.dataTransfer.setData("obj1", e.target.id);
return false;
}
function dropObject(e){
if(moved==true){
return false;
}
var received=e.dataTransfer.getData("obj1");
e.dataTransfer.dropEffect="move";
e.preventDefault();
e.stopPropagation();
e.target.appendChild(document.getElementById(received));
moved=true;
return false;
}
</script>
The stuff about preventing defaults and stopping propagation is just to override default browser behavior, which might cause it to try and navigate somewhere or open the image as a link, for example. The moved variable prevents the code from executing after the action has already been performed.
MODIFY THE OBJECT AND TARGET DECLARATIONS
Nothing will happen if the functions are never called. You just need to change the declarations of the object and target like this:
<img id="dragMe" src="pic.jpg" draggable="true" ondragstart="dragObject(event);">
and
<div id="drop_target" ondragover="event.preventDefault();" ondrop="dropObject(event);">
While this is only a basic introduction to the concept of drag-and-drop, you can find everything you need to know by visiting the official HTML spec for drag-and-drop.
Post a Comment