The jQuery UI .draggable() function allows you to designate elements on your page for the user to drag across the screen with their cursor.

This is often used with other functions, like .droppable() to create games, or for filling out forms.

Here is a demo of the draggable interaction

 

Demo Source Code

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jQuery UI Draggable Demo</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<style>
    body {font-family: Arial, sans-serif;}
    #draggable {
        padding: 6px 10px;
        background: #555;
        color: #fff;
        cursor: pointer;
        position: absolute;
        top: 200px;
        left: 50%;
    }
    h4 {
        text-align: center;
    }
</style>
<script>
    $(function() {
        $( "#draggable" ).draggable(); // this selector seeks out the element with id="#draggable".
    });
</script>
</head>
<body>
    <div id="draggable" class="ui-widget-content">
        <h4>You can drag this box<br/>around the screen</h4>
    </div>
</body>
</html>

 

Other options for draggable

Other things that you can do with .draggable() by adding parameters or combining it with other functions:


♦ Auto-scroll: This setting will allow you to continue to drag an element past the current view and the window will automatically scroll so that you can still see the item that you are dragging. You can also set the speed of the scrolling.

$("#dragPast").draggable({scroll:true, scrollSpeed:75});


♦ Constrain movement: This setting will limit the area in which the element can be dragged around. You can limit it to be able to only go in the x or y direction or you can provide the name of a containing element.

$("#dragUp").draggable({axis: "y"}); // this can only be dragged up or down
$("#dragAcross").draggable({axis: "x"}); // this can only be dragged to the right or left direction
$("#dragContained").draggable({containment: "parent"}); // this can only be dragged in the parent containing element
$("#dragThis").draggable({containment: "#biggerBox"}); // this can only be dragged within the element of id="#biggerBox


♦ Cursor Style and Position: This setting allows you to position the cursor relative to the element being dragged. You can also change the type of cursor per standard CSS cursor values: crosshair, pointer, move, etc.

$("#dragCursorPos").draggable({cursor: "pointer", cursorAt: {bottom: 0, right: 0;}});


♦ Events: These settings allows you to add functionality attached to the start, drag and stop events associated with .draggable(). 


♦ Handle: This setting allows you to have one element as the handle - and when you drag it, other elements are dragged along with it.

$( "#dragHandle" ).draggable({ handle: "p" });

♦ Draggable and Sortable: Combine the functions of .draggable() and .sortable() for sorting lists.


♦ Revert to original position: You may choose to have the element revert to its original position after being dragged.


♦ Snap to an element or grid: You may choose to have the element being dragged snap to a specified grid or to another element's bounding box when it is no longer being dragged.


♦ Revert to original position: You may choose to have the element revert to its original position after being dragged.

 

How to make jQuery UI .draggable() work with touchscreen devices

The .draggable() interaction works fine with monitors and mouse navigation devices. It needs some extra code for it to work properly on touchscreen devices like tablets and phones.

Refer to this jQ.Zemplate article for the code: How to make jQuery draggable work on touchscreen devices