Coding With Fun
Home Docker Django Node.js Articles Python pip guide FAQ Policy

jQuery UI Instance - Dragable

May 08, 2021 jQuery UI

Table of contents

1. jQuery UI Instance - Dragable

2. The default feature

3. Scroll automatically

4. Constraint motion

5. Cursor style

6. Delayed start

7. Event

8. Handles

9. Restore the location

10.. Align to an element or grid

11.. Visual feedback

12.. jQuery UI Draggable + Sortable

jQuery UI Instance - Dragable

This section describes a drag instance of the jQuery UI, which allows elements to be moved with the mouse.

To learn more about dragable interactions, check out the API documentation Dragable Widget.

The default feature

Enable dragable on any DOM element. Move the dragable object by clicking the mouse and dragging it in the viewspace. 

<!doctype html>
<html >
<head>
  <meta charset="utf-8">
  <title>jQuery UI 拖动（Draggable） - 默认功能</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >
  <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
  <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >
  <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>请拖动我！</p>
</div>
 
 
</body>
</html>

Scroll automatically

Scrolls the document automatically when dragable moves out of view. Set scroll option to true to enable automatic scrolling, fine-tune when scrolling triggers, and scroll speed is set by the scrollSensitivity and scrollSpeed options. 

<!doctype html>
<html >
<head>
  <meta charset="utf-8">
  <title>jQuery UI 拖动（Draggable） - 自动滚动</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >
  <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
  <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >
  <style>
  #draggable, #draggable2, #draggable3 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 0 10px 10px 0; }
  </style>
  <script>
  $(function() {
    $( "#draggable" ).draggable({ scroll: true });
    $( "#draggable2" ).draggable({ scroll: true, scrollSensitivity: 100 });
    $( "#draggable3" ).draggable({ scroll: true, scrollSpeed: 100 });
  });
  </script>
</head>
<body>
 
<div id="draggable" class="ui-widget-content">
  <p>Scroll 设置为 true，默认设置</p>
</div>
 
<div id="draggable2" class="ui-widget-content">
  <p>scrollSensitivity 设置为 100</p>
</div>
 
<div id="draggable3" class="ui-widget-content">
  <p>scrollSpeed 设置为 100</p>
</div>
 
<div style="height: 5000px; width: 1px;"></div>
 
 
</body>
</html>

Constraint motion

The drag range can be self-defined by defining the boundaries of the dragable region to constrain the motion of each dragable. Set axis option to limit the path of dragable to x-axis or y-axis, or use the include containment to specify a parent DOM element or a jQuery selector, such as 'document.'. 

<!doctype html>
<html >
<head>
  <meta charset="utf-8">
  <title>jQuery UI 拖动（Draggable） - 约束运动</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >
  <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
  <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >
  <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>沿着轴约束运动：</h3>
 
<div id="draggable" class="draggable ui-widget-content">
  <p>只能垂直拖拽</p>
</div>
 
<div id="draggable2" class="draggable ui-widget-content">
  <p>只能水平拖拽</p>
</div>
 
<h3>或者在另一个 DOM 元素中约束运动：</h3>
<div id="containment-wrapper">
  <div id="draggable3" class="draggable ui-widget-content">
    <p>我被约束在盒子里</p>
  </div>
 
  <div class="draggable ui-widget-content">
    <p id="draggable5" class="ui-widget-header">我被约束在父元素内</p>
  </div>
</div>
 
 
</body>
</html>

Cursor style

Position the cursor when dragging an object. B y default, the cursor appears in the middle of the dragged object. U se cursorAt option to specify another location relative to the draggable (specify a pixel value relative to top, right, bottom, left). C ustomize the appearance of the cursor by providing a cursor cursor value. Valid CSS cursor values include: default, move, pointer, crosshair, and so on. 

<!doctype html>
<html >
<head>
  <meta charset="utf-8">
  <title>jQuery UI 拖动（Draggable） - 光标样式</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >
  <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
  <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >
  <style>
  #draggable, #draggable2, #draggable3 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 0 10px 10px 0; }
  </style>
  <script>
  $(function() {
    $( "#draggable" ).draggable({ cursor: "move", cursorAt: { top: 56, left: 56 } });
    $( "#draggable2" ).draggable({ cursor: "crosshair", cursorAt: { top: -5, left: -5 } });
    $( "#draggable3" ).draggable({ cursorAt: { bottom: 0 } });
  });
  </script>
</head>
<body>
 
<div id="draggable" class="ui-widget-content">
  <p>我总是在中间（相对于鼠标）</p>
</div>
 
<div id="draggable2" class="ui-widget-content">
  <p>我的光标是在 left -5 和 top -5</p>
</div>
 
<div id="draggable3" class="ui-widget-content">
  <p>我的光标位置只控制了 'bottom' 值</p>
</div>
 
 
</body>
</html>

Delayed start

Use the delay option to set the number of milliseconds to start dragging late. The distance allows drag to be allowed after the cursor is pressed and the specified pixel is dragged. 

<!doctype html>
<html >
<head>
  <meta charset="utf-8">
  <title>jQuery UI 拖动（Draggable） - 延迟开始</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >
  <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
  <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >
  <style>
  #draggable, #draggable2 { width: 120px; height: 120px; padding: 0.5em; float: left; margin: 0 10px 10px 0; }
  </style>
  <script>
  $(function() {
    $( "#draggable" ).draggable({ distance: 20 });
    $( "#draggable2" ).draggable({ delay: 1000 });
    $( ".ui-draggable" ).disableSelection();
  });
  </script>
</head>
<body>
 
<div id="draggable" class="ui-widget-content">
  <p>只有把我拖拽了 20 像素后，拖拽才开始</p>
</div>
 
<div id="draggable2" class="ui-widget-content">
  <p>不管 distance 是多少，您都必须拖拽并等待 1000ms 后拖拽才开始</p>
</div>
 
 
</body>
</html>

Event

Start, start drag on stop The drag starts with start event, the drag event is triggered during drag and the stop event is triggered when the stop 

<!doctype html>
<html >
<head>
  <meta charset="utf-8">
  <title>jQuery UI 拖动（Draggable） - 事件</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >
  <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
  <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >
  <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 ) {
      // 首先更新视觉状态...
      if ( !$event_counter.hasClass( "ui-state-hover" ) ) {
        $event_counter.addClass( "ui-state-hover" )
          .siblings().removeClass( "ui-state-hover" );
      }
      // ...然后更新数字
      $( "span.count", $event_counter ).text( new_count );
    }
  });
  </script>
</head>
<body>
 
<div id="draggable" class="ui-widget ui-widget-content">
 
  <p>请拖拽我，触发一连串的事件。</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" 被调用 <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" 被调用 <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" 被调用 <span class="count">0</span>x</li>
  </ul>
</div>
 
 
</body>
</html>

Handles

Drag is allowed only if the cursor specifies a section on dragable. Use handle option to specify the jQuery selector for dragging elements (or groups of elements) of an object.

Or drag is not allowed when the cursor specifies an element (or group of elements) within dragable. Use handle option to specify the jQuery selector for the untug function. 

<!doctype html>
<html >
<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" rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >
  <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
  <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >
  <style>
  #draggable, #draggable2 { width: 100px; height: 100px; 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">您只可以在这个范围内拖拽我</p>
</div>
 
<div id="draggable2" class="ui-widget-content">
  <p>您可以把我向四周拖拽&hellip;</p>
  <p class="ui-widget-header">&hellip;但是您不可以在这个范围内拖拽我</p>
</div>
 
 
</body>
</html>

Restore the location

When dragable with revert option stops dragging, return dragable (or its assistant) to its original position. 

<!doctype html>
<html >
<head>
  <meta charset="utf-8">
  <title>jQuery UI 拖动（Draggable） - 还原位置</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >
  <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
  <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >
  <style>
  #draggable, #draggable2 { width: 100px; height: 100px; 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>还原</p>
</div>
 
<div id="draggable2" class="ui-widget-content">
  <p>还原助手</p>
</div>
 
 
</body>
</html>

Align to an element or grid

Aligns the internal or external boundaries of the dragable to the DOM element. Use snap snapMode (inner, outer, both), and snapTolerance (when the call is aligned, the distance between the draggable and the element, in pixels) options.

Or align dragable to the grid. Sets grid of the grid cell, in pixels, by using the grid option. 

<!doctype html>
<html >
<head>
  <meta charset="utf-8">
  <title>jQuery UI 拖动（Draggable） - 对齐到元素或网格</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >
  <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
  <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >
  <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>我是对齐目标</p>
</div>
 
<br style="clear:both">
 
<div id="draggable" class="draggable ui-widget-content">
  <p>默认（snap: true），对齐到所有其他的 draggable 元素</p>
</div>
 
<div id="draggable2" class="draggable ui-widget-content">
  <p>我只对齐到大盒子</p>
</div>
 
<div id="draggable3" class="draggable ui-widget-content">
  <p>我只对齐到大盒子的外边缘</p>
</div>
 
<div id="draggable4" class="draggable ui-widget-content">
  <p>我对齐到一个 20 x 20 网格</p>
</div>
 
<div id="draggable5" class="draggable ui-widget-content">
  <p>我对齐到一个 80 x 80 网格</p>
</div>
 
 
</body>
</html>

Visual feedback

Give feedback to the user as if you were dragging an object as an assistant. helper option accepts the value 'original' (moving the dragable object with the cursor), 'clone' (moving a copy of dragable with the cursor), or a function that returns the DOM element (which appears near the cursor during drag). Control the transparency of the assistant with the opacity option.

To tell which dragable is being dragged, keep dragable at the top of the movement. If you are dragging, zIndex set the height z-index of the stack to ensure that the last item being dragged always appears on top of other items in the same group when you stop dragging. 

<!doctype html>
<html >
<head>
  <meta charset="utf-8">
  <title>jQuery UI 拖动（Draggable） - 视觉反馈</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >
  <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
  <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >
  <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">助手：</h3>
 
<div id="draggable" class="ui-widget-content">
  <p>原始的</p>
</div>
 
<div id="draggable2" class="ui-widget-content">
  <p>半透明的克隆</p>
</div>
 
<div id="draggable3" class="ui-widget-content">
  <p>自定义助手（与 cursorAt 结合）</p>
</div>
 
<h3 class="docs">堆叠：</h3>
<div id="set">
  <div class="ui-widget-content">
    <p>我们是 draggables..</p>
  </div>
 
  <div class="ui-widget-content">
    <p>..它的 z-index 是自动控制的..</p>
  </div>
 
  <div class="ui-widget-content">
    <p>..带有 stack 选项。</p>
  </div>
</div>
 
 
</body>
</html>

jQuery UI Draggable + Sortable

The seamless interaction between Draggable and Sortable. 

<!doctype html>
<html >
<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" rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >
  <script src="//code.jquery.com/jquery-1.9.1.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
  <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >
  <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">请拖拽我</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>


Related

jQuery UI Instance - Widget Factory

jQuery UI CSS Framework API

jQuery UI API Category - Utility

jQuery UI Instances - Sortable

jQuery UI Instance - Button

jQuery UI Instance - Progress bar

Introduction to jQuery UI

jQuery UI Instance - Position

jQuery UI API Category - Interaction

jQuery UI API Category - Special Effects