给用户提供反馈,就像以助手方式拖拽对象一样。helper
选项接受值 'original'(用光标移动 draggable 对象),'clone'(用光标移动 draggable 的副本),或者一个返回 DOM 元素的函数(该元素在拖拽期间显示在光标附近)。通过 opacity
选项控制助手的透明度。
为了区别哪一个 draggable 正在被拖拽,让在运动中的 draggable 保持最前。如果正在拖拽,使用 zIndex
选项来设置助手的高度 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>