Draggable Elements With jQuery UI

I set out to find the bare minimum requirements for making draggable elements with jQuery UI.  It turns out the minimum is actually very little!

<!-- First, add some things to drag around -->
<div class='thing'>Thing 1</div>
<div class='thing'>Thing 2</div>
<div class='thing'>Thing 3</div>

<!-- Then include jQuery and jQuery UI. We are using Google's hosted versions, but you can add your own if you like -->
<script type='text/javascript' src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type='text/javascript' src="//ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>

<!-- Finally, we need to include our own JavaScript to enable dragging the HTML elements -->
<script type='text/javascript'>

    // We only need one line of code, thanks to jQuery UI!
    $('.thing').draggable();
</script>

The above code gives us the following:

So did it work?

Yes, it did!  Don’t believe me?  Go ahead and drag Things 1, 2, and 3 around above.  You probably noticed that this implementation leaves a lot to be desired, such as:

• How is the user supposed to know that Things 1, 2, and 3 are draggable?  They would never know unless they happened to try it.
• Without some sort of structure and a well-defined place to drag the Things to, it all seems pretty random.  The Things can be dragged anywhere they want without any constraints and without any purpose.
• In the middle of dragging, the Things trigger the scrollbar at the bottom of the document, even if they are nowhere near the edge.

But hey…it’s draggable, right?

To all of these points I say…this is what you get when you seek the bare minimum!   Nonetheless, there is a lot to be learned by seeking the minimal working setup when trying out different types of code and code libraries.

There are many ways to customize the experience and solve these basic problems, but hopefully this illustrates the core concept and how simple it actually is to implement.