jQuery UI: Introduction

This entry is part 1 of 11 in the series jQuery UI Draggable

jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library.

jQuery UI is built for designers and developers alike.

Whether you’re building highly interactive web applications or you just need to add a date picker to a form control, jQuery UI is the perfect choice.

jQuery UI & Draggable: Default funtionality

This entry is part 2 of 11 in the series jQuery UI Draggable

jQuery UI Draggable – Default functionality

Enable draggable functionality on any DOM element.

Move the draggable object by clicking on it with the mouse and dragging it anywhere within the viewport.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Draggable - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.9.1.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  <style>
  #draggable { width: 150px; height: 150px; padding: 0.5em; }
  </style>
  <script>
  $(function() {
    $( "#draggable" ).draggable();
  });
  </script>
</head>
<body>
 
<div id="draggable" class="ui-widget-content">
  <p>Drag me around</p>
</div>
  
</body>
</html>
Try The Code

The class ui-widget-content is one of the list of classes used by jQuery UI. The classes are designed to create a visual consistency across an application. 

The class ui-widget-content provides styling for content box.

Other jQuery UI classes are listed here.

jQuery UI & Draggable: Constrain movement

This entry is part 3 of 11 in the series jQuery UI Draggable

jQuery UI Draggable – Constrain movement

Constrain the movement of each draggable by defining the boundaries of the draggable area.

Set the axis option to limit the draggable’s path to the x- or y-axis, or use the containment option to specify a parent DOM element or a jQuery selector.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Draggable - Constrain movement</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.9.1.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="https://codecrawl.com/code/jqueryui/jqueryui_style.css">
  <style>
  .draggable { width: 90px; height: 90px; padding: 0.5em; float: left; margin: 0 10px 10px 0; }
  #draggable, #draggable2 { margin-bottom:20px; }
  #draggable { cursor: n-resize; }
  #draggable2 { cursor: e-resize; }
  #containment-wrapper { width: 95%; height:150px; border:2px solid #ccc; padding: 10px; }
  h3 { clear: left; }
  </style>
  <script>
  $(function() {
    $( "#draggable" ).draggable({ axis: "y" });
    $( "#draggable2" ).draggable({ axis: "x" });
    $( "#draggable3" ).draggable({ containment: "#containment-wrapper", scroll: false });
    $( "#draggable5" ).draggable({ containment: "parent" });
  });
  </script>
</head>
<body>
 
<h3>Constrain movement along an axis:</h3>
 
<div id="draggable" class="draggable ui-widget-content">
  <p>I can be dragged only vertically</p>
</div>
 
<div id="draggable2" class="draggable ui-widget-content">
  <p>I can be dragged only horizontally</p>
</div>
 
<h3>Or to within another DOM element:</h3>
<div id="containment-wrapper">
  <div id="draggable3" class="draggable ui-widget-content">
    <p>I'm contained within the box</p>
  </div>
 
  <div class="draggable ui-widget-content">
    <p id="draggable5" class="ui-widget-header">I'm contained within my parent</p>
  </div>
</div>
 
</body>
</html>
Try The Code

jQuery UI & Draggable: Sortable

This entry is part 4 of 11 in the series jQuery UI Draggable

jQuery UI Draggable + Sortable

Draggables are built to interact seamlessly with sortable.

We have $(“ul, li”).disableSelection() so that when the mouse is moved over the boxes, the text will not be selected.

When setting helper: ‘clone’, then the element will be cloned and the clone is the element that is going to be dragged.

The revert: ‘invalid’ will prevent the draggable element to return to its original postion once it is dragged and positioned in the sortable boxes.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jQuery UI Draggable + Sortable</title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
    <script src="//code.jquery.com/jquery-1.9.1.js"></script>
    <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
    <link rel='stylesheet' href='https://codecrawl.com/code/jqueryui/jqueryui_style.css'>
    <style>
        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            margin-bottom: 10px;
        }

        li {
            margin: 5px;
            padding: 5px;
            width: 150px;
        }
    </style>
    <script>
        $(function () {
            $("#sortable").sortable({
                revert: true
            });
            $("#draggable").draggable({
                connectToSortable: "#sortable",
                helper: "clone",
                revert: "invalid"
            });
            $("ul, li").disableSelection();
        });
    </script>
</head>
<body>

<ul>
    <li id="draggable" class="ui-state-highlight">Drag me down</li>
</ul>

<ul id="sortable">
    <li class="ui-state-default">Item 1</li>
    <li class="ui-state-default">Item 2</li>
    <li class="ui-state-default">Item 3</li>
    <li class="ui-state-default">Item 4</li>
    <li class="ui-state-default">Item 5</li>
</ul>


</body>
</html>
Try The Code

jQuery UI & Draggable: Visual Feedback

This entry is part 5 of 11 in the series jQuery UI Draggable

jQuery UI Draggable – Visual feedback

Provide feedback to users as they drag an object in the form of a helper. The helper option accepts the values ‘original’ (the draggable object moves with the cursor), ‘clone’ (a duplicate of the draggable moves with the cursor), or a function that returns a DOM element (that element is shown near the cursor during drag). Control the helper’s transparency with the opacity option.

To clarify which draggable is in play, bring the draggable in motion to front. Use the zIndex option to set a higher z-index for the helper, if in play, or use the stack option to ensure that the last item dragged will appear on top of others in the same group on drag stop.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jQuery UI Draggable - Visual feedback</title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
    <script src="//code.jquery.com/jquery-1.9.1.js"></script>
    <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
    <link rel='stylesheet' href='https://codecrawl.com/code/jqueryui/jqueryui_style.css'>
    <style>
        #draggable, #draggable2, #draggable3, #set div {
            width: 90px;
            height: 90px;
            padding: 0.5em;
            float: left;
            margin: 0 10px 10px 0;
        }

        #draggable, #draggable2, #draggable3 {
            margin-bottom: 20px;
        }

        #set {
            clear: both;
            float: left;
            width: 368px;
            height: 120px;
        }

        p {
            clear: both;
            margin: 0;
            padding: 1em 0;
        }
    </style>
    <script>
        $(function () {
            $("#draggable").draggable({ helper: "original" });
            $("#draggable2").draggable({ opacity: 0.7, helper: "clone" });
            $("#draggable3").draggable({
                cursor: "move",
                cursorAt: { top: -12, left: -20 },
                helper: function (event) {
                    return $("<div class='ui-widget-header'>I'm a custom helper</div>");
                }
            });
            $("#set div").draggable({ stack: "#set div" });
        });
    </script>
</head>
<body>

<h3 class="docs">With helpers:</h3>

<div id="draggable" class="ui-widget-content">
    <p>Original</p>
</div>

<div id="draggable2" class="ui-widget-content">
    <p>Semi-transparent clone</p>
</div>

<div id="draggable3" class="ui-widget-content">
    <p>Custom helper (in combination with cursorAt)</p>
</div>



<div id="set">
    <h3 class="docs">Stacked:</h3>
    <div class="ui-widget-content">
        <p>We are draggables..</p>
    </div>

    <div class="ui-widget-content">
        <p>..whose z-indexes are controlled automatically..</p>
    </div>

    <div class="ui-widget-content">
        <p>..with the stack option.</p>
    </div>
</div>


</body>
</html>
Try The Code

With the stack option, the last one dragged will always be on top of the others.