jQuery UI & Draggable: Delay Start

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

jQuery UI Draggable – Delay start

Delay the start of dragging for a number of milliseconds with the delay option; prevent dragging until the cursor is held down and dragged a specifed number of pixels with the distance option.

<!doctype html>
<head>
    <title>jQuery UI Draggable - Delay start</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: 120px;
            height: 120px;
            padding: 0.5em;
            float: left;
            margin: 0 10px 10px 0;
        }
    </style>
    <script>
        $(function () {
            $('#draggable').draggable({ distance: 40 });
            $('#draggable2').draggable({ delay: 1000 });
            $('.ui-draggable').disableSelection();
        });
    </script>
</head>
<body>

<div id='draggable' class='ui-widget-content'>
    <p>Only if you drag me by 40 pixels, the dragging will start</p>
</div>

<div id='draggable2' class='ui-widget-content'>
    <p>Regardless of the distance, you have to drag and wait for 1000ms before dragging starts</p>
</div>


</body>
</html>
Try The Code

In line 21, the disableSelection() method will prevent the mouse from making any text selection.

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: Events

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

jQuery UI Draggable – Events

Layer functionality onto the draggable using the startdrag, and stop events. Start is fired at the start of the drag; drag during the drag; and stop when dragging stops.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jQuery UI Draggable - Events</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: 16em; padding: 0 1em; }
        #draggable ul li { margin: 1em 0; padding: 0.5em 0; } * html #draggable ul li { height: 1%; }
        #draggable ul li span.ui-icon { float: left; }
        #draggable ul li span.count { font-weight: bold; }
    </style>
    <script>
        $(function() {
            var $start_counter = $( "#event-start" ),
                    $drag_counter = $( "#event-drag" ),
                    $stop_counter = $( "#event-stop" ),
                    counts = [ 0, 0, 0 ];

            $( "#draggable" ).draggable({
                start: function() {
                    counts[ 0 ]++;
                    updateCounterStatus( $start_counter, counts[ 0 ] );
                },
                drag: function() {
                    counts[ 1 ]++;
                    updateCounterStatus( $drag_counter, counts[ 1 ] );
                },
                stop: function() {
                    counts[ 2 ]++;
                    updateCounterStatus( $stop_counter, counts[ 2 ] );
                }
            });

            function updateCounterStatus( $event_counter, new_count ) {
                // first update the status visually...
                if ( !$event_counter.hasClass( "ui-state-hover" ) ) {
                    $event_counter.addClass( "ui-state-hover" )
                            .siblings().removeClass( "ui-state-hover" );
                }
                // ...then update the numbers
                $( "span.count", $event_counter ).text( new_count );
            }
        });
    </script>
</head>
<body>

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

    <p>Drag me to trigger the chain of events.</p>

    <ul class="ui-helper-reset">
        <li id="event-start" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-play"></span>"start" invoked <span class="count">0</span>x</li>
        <li id="event-drag" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-arrow-4"></span>"drag" invoked <span class="count">0</span>x</li>
        <li id="event-stop" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-stop"></span>"stop" invoked <span class="count">0</span>x</li>
    </ul>
</div>


</body>
</html>
Try The Code

There are actually 4 events in draggable,  start, drag, stop and create.

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: 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