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.

jQuery UI & Draggable: Snap To Element Or Grid

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

jQuery UI Draggable – Snap to element or grid

jQuery UI allows snapping the draggable to the inner or outer boundaries of a DOM element. Use the snapsnapMod (inner, outer, both), and snapTolerance (distance in pixels the draggable must be from the element when snapping is invoked) options.

Or snap the draggable to a grid. Set the dimensions of grid cells (height and width in pixels) with the grid option.

<!doctype html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <title>jQuery UI Draggable - Snap to element or grid</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: 90px; height: 80px; padding: 5px; float: left; margin: 0 10px 10px 0; font-size: .9em; }
        .ui-widget-header p, .ui-widget-content p { margin: 0; }
        #snaptarget { height: 140px; }
    </style>
    <script>
        $(function() {
            $( '#draggable' ).draggable({ snap: true });
            $( '#draggable2' ).draggable({ snap: '.ui-widget-header' });
            $( '#draggable3' ).draggable({ snap: '.ui-widget-header', snapMode: 'outer' });
            $( '#draggable4' ).draggable({ grid: [ 20, 20 ] });
            $( '#draggable5' ).draggable({ grid: [ 80, 80 ] });
        });
    </script>
</head>
<body>

<div id='snaptarget' class='ui-widget-header'>
    <p>I'm a snap target</p>
</div>

<br style='clear:both'>

<div id='draggable' class='draggable ui-widget-content'>
    <p>Default (snap: true), snaps to all other draggable elements</p>
</div>

<div id='draggable2' class='draggable ui-widget-content'>
    <p>I only snap to the big box</p>
</div>

<div id='draggable3' class='draggable ui-widget-content'>
    <p>I only snap to the outer edges of the big box</p>
</div>

<div id='draggable4' class='draggable ui-widget-content'>
    <p>I snap to a 20 x 20 grid</p>
</div>

<div id='draggable5' class='draggable ui-widget-content'>
    <p>I snap to a 80 x 80 grid</p>
</div>


</body>
</html>
Try The Code

If you move the box around, you will find that the snap to 20×20 grid provides a smaller movement where snap to 80×80 provides a bigger movement of the box.

jQuery UI & Draggable: Revert

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

jQuery UI Draggable – Revert position

Revert returns the draggable (or it’s helper) to its original location when dragging stops with the boolean revert option.

<!doctype html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <title>jQuery UI Draggable - Revert position</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 {
            width: 150px;
            height: 150px;
            padding: 0.5em;
            float: left;
            margin: 0 10px 10px 0;
        }
    </style>
    <script>
        $(function () {
            $('#draggable').draggable({ revert: true });
            $('#draggable2').draggable({ revert: true, helper: 'clone' });
        });
    </script>
</head>
<body>

<div id='draggable' class='ui-widget-content'>
    <p>Revert the original</p>
</div>

<div id='draggable2' class='ui-widget-content'>
    <p>Revert the helper</p>
</div>
</body>
</html>

Try The Code

jQuery UI & Draggable: Handles

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

jQuery UI Draggable – Handles

Handles allow dragging only when the cursor is over a specific part of the draggable. Use the handle option to specify the jQuery selector of an element (or group of elements) used to drag the object.

Or prevent dragging when the cursor is over a specific element (or group of elements) within the draggable. Use the cancel option to specify a jQuery selector over which to “cancel” draggable functionality.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jQuery UI Draggable - Handles</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 {
            width: 150px;
            height: 150px;
            padding: 0.5em;
            float: left;
            margin: 0 10px 10px 0;
        }

        #draggable p {
            cursor: move;
        }
    </style>
    <script>
        $(function () {
            $("#draggable").draggable({ handle: "p" });
            $("#draggable2").draggable({ cancel: "p.ui-widget-header" });
            $("div, p").disableSelection();
        });
    </script>
</head>
<body>

<div id="draggable" class="ui-widget-content">
    <p class="ui-widget-header">I can be dragged only by this handle</p>
</div>

<div id="draggable2" class="ui-widget-content">
    <p>You can drag me around…</p>

    <p class="ui-widget-header">…but you can't drag me by this handle.</p>
</div>


</body>
</html>
Try The Code