Getting the ID of draggable and droppable elements – jQuery

print

jQuery’s drag and drop functionality is fantastic and adds excellent interactivity to your web application.  However, it can be a little confusing, so here are some straightforward examples that should get you off to a flying start when venturing into the world of drag and drop.

First, we need a few things to move around, so let’s create some:

<div id="div_01" class="draggable">Div 01</div>
<div id="div_02" class="draggable">Div 02</div>
<div id="div_03" class="draggable">Div 03</div>
<div id="div_04" class="draggable">Div 04</div>
<div id="div_05" class="draggable">Div 05</div>

You’ll need to get these in the context of your web page.

Next, we need somewhere to drop them:

<div id="dropzone_1" class="dropzone" style="height:100px;width:100px;border:1px solid black"></div>
<div id="dropzone_2" class="dropzone" style="height:100px;width:100px;border:1px solid black"></div>
<div id="dropzone_3" class="dropzone" style="height:100px;width:100px;border:1px solid black"></div>

I’ve used inline styles in the example above in case you are copying and pasting into a test HTML page of your own.  Inline styling isn’t great in a production environment; a separate style sheet is always better.  I’ve also assumed, that you have loaded the jQuery / jQuery UI version[s] of your choice onto the page by this point as well.

Making these elements draggable and droppable is easy.  Just add a function that covers both scenarios and then build upon them.

$(function () {
    $(".draggable").draggable();
    $(".dropzone").droppable();
});

At this point, you should be able to grab you divs and move them around the page.  They won’t do anything aside from move around the page, but it’s quite a novelty the first time it happens successfully!

It’s at this point the language used by jQuery can be a little bit confusing.  “Draggable” is obvious; it is something that can be dragged around the screen, its when you get to “droppable” that people sometimes run into confusion.  “Droppable” suggests you are dealing with something that once you start dragging around, is then available to be dropped, however, this isn’t the case.  “Droppable” by jQuery’s definition is the area that you drop a draggable.  The draggable itself, contains the drop event, whereas the droppable is just a static place your draggable gets dropped.

Confused yet? Don’t be; it’s effortless when you see it broken down.

Doing something with my draggable and droppable.

Take a look at this extended version of the code snippet above.  What you see below is taken directly from one of my live projects, so will need to be customised to suit your project:

$(function () {
    $(".draggable").draggable(
        {
            start:
                function (event, ui) {
                    $(this).css("z-index", 10);
                }
        }
    );
    $(".dropzone").droppable({
        drop: function (event, ui) {

            const dropZoneID = $(this).attr('id');
            const droppedItemID = ui.draggable.attr("id");

            /* 
             Do something with your newly gathered information
             */
        }
    });
});

So what is going on in the code above?  Let’s start with the draggable.  There are various events associated with the draggable.  Notably, these are start, stop and drag.  In the example above I’ve used the start event to bring the item, I’m dragging to a z-index of 10.  With my Bootstrap projects, I’ve found this handy to ensure the thing I’m dragging around remains at the top.  If I don’t set this index with Bootstrap, the draggable can end up going behind some of the other elements.

You can find a full reference to jQuery draggable here.

Lovely, but the exciting part comes when you drop these draggable.

The two critical pieces of information you need when dealing with draggable items and dropzones [and this may seem obvious] are, what you’ve dropped and where you’ve dropped it.  This is achieved using the “drop” event inside the droppable.  Here, I have created two constants [variables are also fine] that will gather this information.

A great way to visualise this if you are starting out with these is to add a test div, so you can see what’s happening.

Create a div, like this:

<div id="testDropDiv"></div>

Then in your code, add the following:

$(".dropzone").droppable({
        drop: function (event, ui) {

            const dropZoneID = $(this).attr('id');
            const droppedItemID = ui.draggable.attr("id");

            $("#testDropDiv).empty()
                     .append("I've just dropped div with ID: " + droppedItemID + " Onto: " + dropZoneID);

        }
    });

Which should then update each time you drop one of your draggable onto a dropzone.

The reference for jQuery droppable is available here.

I hope that gives a little bit of an insight into jQuery’s draggable and droppable.  This short introduction has only just scratched the surface of what is achievable.  I would recommend you have a look at the jQuery UI website to see some more examples.

Share this post:
Related Posts
php-banner
PHP ternary operators and how to use them
Adding tabbed panels to Bootstrap – No jQuery
2 Comments
  • TheOne
    Nov 22,2018 at 6:33 am

    Why does every other website make this procedure so complicated? Thank you for your concise demo of how to get drag and drop to behave well.

    • Fluffy
      Nov 22,2018 at 7:30 am

      Haha, you’re welcome. I think it’s because I myself need things to be explained in a dumb way, so that’s the way I try to write it out for others. Basically, how I would like to understand it. I have found that no PHP / Java is all that complicated as long as you break it down into small chunks and do one thing at a time.

Leave a Comment