给用户提供反馈,就像以助手方式拖拽对象一样。helper 选项接受值 'original'(用光标移动 draggable 对象),'clone'(用光标移动 draggable 的副本),或者一个返回 DOM 元素的函数(该元素在拖拽期间显示在光标附近)。通过 opacity 选项控制助手的透明度。

为了区别哪一个 draggable 正在被拖拽,让在运动中的 draggable 保持最前。如果正在拖拽,使用 zIndex 选项来设置助手的高度 z-index,或者使用 stack 选项来确保当停止拖拽时,最后一个被拖拽的项目总是出现在同组其他项目的上面。

助手:

原始的

半透明的克隆

自定义助手(与 cursorAt 结合)

堆叠:

我们是 draggables..

..它的 z-index 是自动控制的..

..带有 stack 选项。

<!doctype html>
<html lang="en">
<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">
  <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="http://jqueryui.com/resources/demos/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">助手:</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>