ResoundingEchoes

The Volume Just Increases

  • Facebook
  • GitHub
  • LinkedIn
  • Twitter
  • YouTube
  • Home
  • Portfolio
  • Blog
  • Interact
    • Say Hello
    • Request A Quote
    • Join Our Newsletter
You are here: Home / Development / Draggable Elements With jQuery UI

Draggable Elements With jQuery UI

February 4, 2016 by Michael Hull Leave a Comment

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:

Thing 1
Thing 2
Thing 3

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.

Filed Under: Development Tagged With: draggable, JavaScript, jQuery, jQuery UI, minimal working setup

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

How can we help you?   »

Recent Posts

  • Creating An xy-Plane Component With Vue.js
  • Set Theory And Russell’s Paradox
  • Function And Set Notation
  • What Is A Function
  • My First Peek At Angular 2

1465 Sand Hill Rd
Suite 1022
Candler, NC 28715

(828) 575-0160 Call us on the phone(828) 575-0160 info@resoundingechoes.net

© 2023 ResoundingEchoes