jQuery UI: Interaction Plugins

Abhimanyu K Vatsa
Jun 09, 2012

22.7k
0
0
- facebook
- twitter
- linkedIn
- Reddit
- WhatsApp
- Email
- Print
- Other Artcile

In this article you will learn all about jQuery UI's Interaction Plugins. You can find all the available plugins on the official website here http://jqueryui.com/. For now, there is only 5 Plugins available in the Interaction section; that is Draggable, Droppable, Resizable, Selectable and Sortable. Interaction Plugins handles complex behaviors like drag and drop, resizing, selection and sorting.

Graphical representation of jQuery UI subordinates:

In the above image, I have highlighted the jQuery UI Interaction Plugins in a rectangular region and in this article we will cover all of them.

You need to setup a demo project to learn Interaction Plugins, please read this article as this article will guide you on how to set up the demo project for the jQuery UI.

Draggable

It enables draggable functionality on any DOM element. Move the draggable object by clicking on it with the mouse and dragging it anywhere within the viewport.

Let's create a demonstration page:

In the above code, I have a <div> by id "draggableDIV" and it has a button. Remember, we can't drag a button control directly because it holds a click event by default; we need to do some extra work for this. But if you place a button inside a <div> tag then you can drag it easily. And the same, I have a label control by id "draggableLabel".

In the above jQuery methods, $("draggableDIV").draggable() will enable the drag feature in the <div> tag. And the same $("draggableLabel").draggable() will enable the drag feature in the Label control.

If you look at the output screen in the browser given below, note that we have not applied a <div> background color instead of width, height and padding but still you will see the color. Why? This is because, remember, in the last article here, we selected the theme option to download the jQuery UI Library. So, in the <div> tag you will see the class attribute, that is 'ui-widget-content' and this style rule is defined in the file 'jquery-ui-1.8.21.custom.css'.

Open the code in the browser to see the draggable in action.

Read more about draggable options, events and methods here.

Droppable

It enables any DOM element to be droppable, a target for draggable elements.

Let's create a demonstration page:

First of all let's look at the applied styles and then we'll discuss the jQuery methods:

#draggable { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
#droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
Just applying the styles width, height, padding, float and margin to both <div>'s.
              $(function () {
                  $("#draggable").draggable();
                  $("#droppable").droppable({
                      drop: function (event, ui) {
                          $(this)
                             .addClass("ui-state-highlight")
                             .find("p")
                             .html("Dropped!");
                      }
                  });
              });

The very first line of the method is simple; it will add a draggable feature to the <div> which has the id = "draggable". The second method is a bit fancy, adding the droppable feature to the <div> which has id = "droppable".

All callbacks receive two arguments: the original browser event and a prepared UI object; look at the following for a documentation of this object (if you name your second argument "ui"):

ui.draggable - current draggable element, a jQuery object.

ui.helper - current draggable helper, a jQuery object

ui.position - current position of the draggable helper { top: , left: }

ui.offset - current absolute position of the draggable helper { top: , left: }

See the page in action.

Let's assume if you want multiple draggable elements on the page, then you can use following coding:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Multiple Draggable</title>
    <link type="text/css" href="Scripts/css/ui-lightness/jquery-ui-1.8.20.custom.css" rel="Stylesheet" />
    <script type="text/javascript" src="Scripts/js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="Scripts/js/jquery-ui-1.8.20.custom.min.js"></script>
    <style type="text/css">
              #draggable-1 {
            background-color:#CCC;
            width: 100px;
            height: 100px;
            padding: 0.5em;
            float: left;
            margin: 10px 10px 10px 0;
        }
        #draggable-2 {
            background-color:#E34E47;
            width: 100px;
            height: 100px;
            padding: 0.5em;
            float: left;
            margin: 10px 10px 10px 0;
        }
        #droppable {
            background-color:#0F0;
            width: 150px;
            height: 150px;
            padding: 0.5em;
            float: left;
            margin: 10px;
        }
          </style>
          <script type="text/javascript">
              $(function () {
                  $("#draggable-1").draggable();
                  $("#draggable-2").draggable();

                  $("#droppable").droppable({
                      drop: function (event, ui) {
                          var currentId = $(ui.draggable).attr('id');

                          if (currentId == "draggable-1") {
                              $(this)

                              window.location = "http://www.itorian.com/search/label/jQuery"
                              alert("You are going to learn jQuery.")

                          } else {
                              $(this)

                              window.location = "http://www.itorian.com/search/label/ASP.NET"
                              alert("You are going to learn ASP.NET.")
                          }
                      }
                  });
              });
          </script>
</head>
<body>
    <form id="form1" runat="server">
        <div id="draggable-1">
            <p>Let's go to learn jQuery.</p>
        </div>

        <div id="draggable-2">
            <p>Let's go to learn ASP.NET.</p>
        </div>

        <div id="droppable">
            <p>Please come, i'll teach you.</p>
        </div>
    </form>
</body>
</html>

See the page in action.

Read more about droppable options, events and methods here.

Resizable

It enables any DOM element to be resizable. With the cursor, grab the right or bottom border and drag to the desired width or height.

Let's create a demonstration page:

          </style>
          <script type="text/javascript">
              $(function () {
                  $("#resizable").resizable();
              });
          </script>
</head>
<body>
    <form id="form1" runat="server">
        <div id="resizable" class="ui-widget-content">
                  <h3 class="ui-widget-header">Resizable</h3>
        </div>
    </form>
</body>
</html>

Nothing new here, let's look at it in the bowser:

Selectable

It enables a DOM element (or group of elements) to be selectable. Draw a box with your cursor to select items. Hold down the Ctrl key to make multiple non-adjacent selections.

Let's create a demonstration page:

The jQuery UI Selectable plugin allows elements to be selected by dragging a box (sometimes called a lasso) with the mouse over the elements. Also, elements can be selected by clicking or dragging while holding the Ctrl/Meta key, allowing for multiple (non-contiguous) selections. Let's look at it in a bowser.

Sortable

It enables a group of DOM elements to be sortable. Click on and drag an element to a new spot within the list, and the other items will adjust to fit. By default, sortable items share draggable properties.

Let's create a demonstration page:

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>One Draggable</title>
    <link type="text/css" href="Scripts/css/ui-lightness/jquery-ui-1.8.20.custom.css" rel="Stylesheet" />
    <script type="text/javascript" src="Scripts/js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="Scripts/js/jquery-ui-1.8.20.custom.min.js"></script>
    <style type="text/css">
           #sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
           #sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }
           #sortable li span { position: absolute; margin-left: -1.3em; }
       </style>
       <script type="text/javascript">
           $(function () {
               $("#sortable").sortable();
               $("#sortable").disableSelection();
           });
       </script>
</head>
<body>
    <form id="form1" runat="server">
        <ul id="sortable">
               <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
               <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
               <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
               <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
               <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li>
               <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li>
               <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li>
        </ul>
    </form>
</body>
</html>

The jQuery UI Sortable plugin makes selected elements sortable by dragging with the mouse. All callbacks receive two arguments: The original browser event and a prepared UI object, view following for a documentation of this object (if you name your second argument "ui"):

ui.helper - the current helper element (most often a clone of the item)

ui.position - current position of the helper

ui.offset - current absolute position of the helper

ui.item - the current dragged element

ui.placeholder - the placeholder (if you defined one)

ui.sender - the sortable where the item comes from (only exists if you move from one connected list to another)

Let's look at it in a browser.

I hope you like it.

Recommended Free Ebook

Frontend Developer Interview Questions and Answers

Download Now!