Drag and Drop series- Highlighting and Wrap up (Part 5/5)

Well, the first thing I want to share is that today's the first time I'm posting multiple posts on the same day! Okay, to the point, our drag and drop program works properly but the only thing we've got to take care of is telling the user that the image can be dragged into the boxes with some highlighting.

How? Well, read on to know more...

View Demo

Well, let's just pretend that this was a desktop app instead of a web app. Now in general when you make apps with drag and drop functionality, you generally have an indicator telling the user that it is okay to drop the image in the box.

For example, in our web app when the person drags the image in to the left box we would like to tell them that it's okay to drop it there. As of now we have a message saying that this is the landing zone but in your real web apps you mostly wont do that. You need another way of telling the user that the box is meant for dropping the image.

Well, in this tutorial we'll add functionality that highlights the box by changing the background colour and border colour so that the user knows that it's a droppable place.

Highlighting the boxes

Well, we want to highlight the boxes when we enter the boxes and remove the highlighting when we leave the boxes while dragging the image, right? So, let's get to that.

First, let's add event listeners for the two boxes that are called when something enters or leaves the box while being dragged.

// Box1 functionality
box1.addEventListener('dragenter', highlight);
box1.addEventListener('dragleave', unHighlight);

// Box2 functionality
box2.addEventListener('dragenter', highlight);
box2.addEventListener('dragleave', unHighlight);

The above code basically says that we'll call the highlight function when the image is dragged into either of the boxes (but not dropped) and we'll call the unHighlight function when the image leaves either of the boxes while being dragged.

Let's build those functions. First of all, we'll change the boxes background colour of the box to some light colour like sky blue and the border to something like blue. But which box do we apply those changes to? How do we know which box is the image being dragged into? Both the boxes use the same function so how do we differentiate between the boxes?

Well, the 'e' parameter that the event listener functions take (highlight and unHighlight) in this case have a property called 'target' which gives us the target element in which the event takes place.

So we can apply the changes to 'e.target'. I hope that made some sense to you... So here's what our our two functions looks like:

function highlight(e){
    // Style the box differently
    box = e.target;
    box.style.border="5px solid blue";
    box.style.background="SkyBlue";
}

function unHighlight(e){
    // Restore original styles
    box = e.target;
    box.style.border="5px solid red";
    box.style.background="white";
}

Removing the highlighting on drop

Well, if the user drops the image in the box we don't have to tell the user that the box is droppable right? So, let's just remove the highlighting when the image is dropped.

We have the functions called dropped1 and dropped2 that are called on drop right? Well, let's just call the unhighlight function from these two functions to remove the highlighting from the boxes and don't forget to pass in the 'e' parameter to the functions.

// Add this line at the end of dropped1 and dropped2
unHighlight(e); // This will remove the highlighting one we've dropped the image...

Aaaand... We're done!

Not just with this post, but the entire series comes to an end now! We've just learned to build an app that can handle drag and drop events and this takes our HTML5 web app building skills to the next level...

Thank you for sticking with me till the very end.