Drag and Drop series- Making our functionality (The easy way) (Part 4/5)

I'm pretty sure that I confused you in the previous post. If I didn't you're good to continue. Please feel free to skip this post. But I did, then this post will make it really simple for you guys to build drag and drop apps.

However, this will only work when there's just one thing to drag on your web page. If there are many, you'll have to keep track of which item is being dragged using the technique mentioned in the previous post.

But don't worry, most of the apps have just one thing to drag unless you're building a shopping cart or something...

First of all, please go ahead and make all the changes that that I mentioned in the previous post about the init function, but you can delete the dragstart event handler because we don't care about when the dragging started as there's just one thing to drag.

Handling the drop event

As I mentioned above, we don't care about the drag event as there's just one image to drag, however, we do care about the drop event as we need to change the image location when the image has been dropped in some box.

When the image is dropped in either box (box1 or box2) a function (dropped1 or dropped2) will be called. These functions will remove the image from the initial box and set some text like "You can also drop the image here" or something. And clear the text in the new box and add the image here.

Specifically, box1's dropped1 function will clear the innerHTML of the box2 because the image has been dragged away from there. And it will set some text in its place like "You can use this as the landing zone too!", then we'll add the image's HTML code to box1.

The same thing goes on for box2 too, but don't forget to get rid of the default functionality for the two functions. So, here's the final code:

function dropped1(e){
    e.preventDefault();
box1.innerHTML='&ltimg id="img" src="<some URL>" /&gt';
    box2.innerHTML='You can use this as the landing zone too!';
    init();
    // We'll call init again so that the event handlers are set to the 
    // new image as well
}

function dropped2(e){
    e.preventDefault();
box2.innerHTML='&ltimg id="img" src="<some URL>" /&gt';
    box1.innerHTML='This is the landing zone!';
    init();
    // We'll call init again so that the event handlers are set to the 
    // new image as well
} 

Conclusion

So, there you go, you've just built an HTML5 app that has drag and drop functionality. However, I strongly recommend going back to the previous tutorial and trying to understand the tracking functionality which I'm pretty sure that you'll understand after today's part.

So, just to recap, we have 2 drop functions that handle the event when anything is dropped in the two boxes and since the only thing that can be dropped is the image we set the inner HTML to the image's HTML code.

Again, please go back and understand the tracking concept it will be really helpful when you have multiple things to drag and drop...