Drag and Drop series- Making our functionality (The real way) (Part 3/5)

Now, that we've got our JavaScript environment set up we can start adding some functionality to our web app.

In this part, we'll make some changes that we forgot in the previous post and we'll create the functions to handle the drag and drop functionality.

View Demo

Now before we do any of the cool stuff let's make some changes in the init() function. First of all rename the variable 'box' as 'box1' because we'll be creating another variable called 'box2'.

Create a variable called 'box2' that references the right box. Also, add the same event listeners as box1 to box2 and don't forget to rename all the occurrences of box as box1.

Also you'll have to rename the function 'dropped' as 'dropped1' for box1 and name the function as 'dropped2' for box two.

If that was confusing, just know that your final init() function look look like this:

function init(){
    // If you can't recall the ids
    // Check the previous post in this series

    img = document.getElementById("img");
    box1 = document.getElementById("left");
    box2 = document.getElementById('right');

    // The event that is called when you start dragging
    img.addEventListener("dragstart", dragged);

    // The event that is called when you finish dragging
    box1.addEventListener("drop", dropped1);
    box2.addEventListener("drop", dropped2);
    // The events that are called when you enter the box
    // and mouseover a box while dragging
    box1.addEventListener("dragenter",function(e){e.preventDefault()});
    box1.addEventListener("dragover",function(e){e.preventDefault()});
    box2.addEventListener("dragenter",function(e){e.preventDefault()});
    box2.addEventListener("dragover",function(e){e.preventDefault()});
}

Handling the drag event

When the person starts dragging the image what do we want to do? Well, first of all we want to store the HTML code of the image in the browser's memory. Why do we want to do this? Well, when the person finishes dragging the object into the other box we'll change the code to transfer the object. But how will we know which object was dragged? I mean, in this case it's easy because there is only one object (the image) to drag, but in a more complex program there can be many more objects to drag, right?

Well, handling the "dragstart" event in our case in in fact optional because we don't have to keep track of what image was dragged. So we can just build the dropped1 and dropped2 functions that change the inner HTML of the boxes when the person drops the image.

But, let's just do it so that we learn to do it.

Now the way we keep track of the image between events is using the 'dataTransfer' object in the e object. The 'dataTransfer' object has a function called 'setData' that takes in a key and some value which can be later accessed by other event functions using the 'getData' function.

So here's what our "dragged" function looks like:

function dragged(e){
    var code = '<img id="img" width="100px" height="100px" src="<your URL>">';

    // The next time someone calls getData from some other event and passes 
    // the id 'some_id', they'll get the value that's in the variable code

    // That's how we'll keep track of which image is being dragged.
    e.dataTransfer.setData('some_id', code);
}

One final thing I want to mention is that it's not that important to understand this code really. In most cases you won't have multiple things to drag, but I felt it's good to include such information in my posts for the sake of completeness so that you don't look blank in your office or school or college or whatever...

Handling the drop event

When the person drops the image what do we have to do? Well, this is really simple, we just have to change the code of the box that the person dropped the image in to show the image and the other one to remove the image.

Well, how will we know which image was dropped? Well, again this is unimportant and I'm just including for completeness. We can very well set the inner HTML to <img src="whatever"> straightaway but as I said earlier, it's good to learn new stuff. 

So, imagine that there are many images on your web page and you kept track of which image is currently being dragged by using e.dataTransfer.setData, so now, let's just fetch the code that we need to add to our drop box using e.dataTransfer.getData, and delete the code from the other box.

This is what it looks like in JavaScript:

function dropped1(e){
    e.preventDefault();
box1.innerHTML=e.dataTransfer.getData('a');
    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=e.dataTransfer.getData('a');
    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 and doubt clarification

So as conclusion, in today's part we learnt to build functionality that allows us to build drag and drop programs.

Now, if you have any problems, please please please, check out the demo that's shown on top of this page. If it still persists, please feel free to comment on this post and I'll try to reply.

I've also decided to build a simpler version of this part as my next part without all the data transfer business as I realize that this post indeed was difficult to understand.