ドラッグ可能
マウスを使用して要素を移動できるようにします。
ドラッグ可能なインタラクションの詳細については、API ドキュメントのドラッグ可能なウィジェットをご覧ください。
デフォルト機能
任意の DOM 要素でドラッグ可能な機能を有効にします。ドラッグ可能なオブジェクトを移動するには、マウスをクリックしてビューポート内でドラッグします。
インスタンス
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI 拖动（Draggable） - 默认功能</title>
<link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
<script src="//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="jqueryui/style.css">
<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>インスタンスの実行 »
「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します
AutoScroll
ドラッグ可能なアイテムがビューポートの外に移動すると、ドキュメントが自動的にスクロールします。 scroll オプションを true に設定すると、自動スクロールが有効になり、スクロールがトリガーされたときの微調整が可能になり、スクロール速度は scrollSensitivity と scrollSpeed で設定されます。 > オプション。 scroll 选项为 true 来启用自动滚动，当滚动触发时进行微调，滚动速度是通过 scrollSensitivity 和 scrollSpeed 选项设置的。
实例
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI 拖动（Draggable） - 自动滚动</title>
<link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
<script src="//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="jqueryui/style.css">
<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>运行实例 »
点击 "运行实例" 按钮查看在线实例
约束运动
通过定义 draggable 区域的边界来约束每个 draggable 的运动。设置 axis 选项来限制 draggable 的路径为 x 轴或者 y 轴，或者使用 containment 选项来指定一个父级的 DOM 元素或者一个 jQuery 选择器，比如 'document.'。
实例
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI 拖动（Draggable） - 约束运动</title>
<link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
<script src="//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="jqueryui/style.css">
<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>运行实例 »
点击 "运行实例" 按钮查看在线实例
光标样式
当拖拽对象时定位光标。默认情况下，光标是出现在被拖拽对象的中间。使用 cursorAt 选项来指定相对于 draggable 的另一个位置（指定一个相对于 top、right、bottom、left 的像素值）。通过提供一个带有有效的 CSS 光标值的 cursor
インスタンス
インスタンスの実行»「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します
🎜🎜🎜動きを制限する🎜🎜 ドラッグ可能な領域の境界を定義して、各ドラッグ可能な動きを制限します。 <!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI 拖动（Draggable） - 光标样式</title>
<link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
<script src="//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="jqueryui/style.css">
<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>インスタンスの実行»「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します
axis オプションを設定してドラッグ可能なパスを X 軸または Y 軸に制限するか、containment オプションを使用して親 DOM 要素または jQuery セレクターを指定します。 「文書」として。 🎜🎜🎜インスタンス🎜🎜<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI 拖动（Draggable） - 延迟开始</title>
<link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
<script src="//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="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: 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>🎜🎜🎜インスタンスの実行»🎜🎜「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します🎜🎜🎜🎜🎜🎜カーソル スタイル🎜🎜 オブジェクトをドラッグするときにカーソルを配置します。デフォルトでは、カーソルはドラッグされたオブジェクトの中央に表示されます。 cursorAt オプションを使用して、ドラッグ可能オブジェクトを基準とした別の位置を指定します (上、右、下、左を基準としたピクセル値を指定します)。 cursor オプションに有効な CSS カーソル値を指定して、カーソルの外観をカスタマイズします。有効な CSS カーソル値には、デフォルト、移動、ポインタ、十字線などが含まれます。 🎜🎜🎜インスタンス🎜🎜<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI 拖动（Draggable） - 事件</title>
<link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
<script src="//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="jqueryui/style.css">
<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>🎜🎜🎜インスタンスの実行 »🎜🎜「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します🎜🎜開始を遅延する
lay オプションを使用して、ドラッグの開始を遅延するミリ秒数を設定します。 distance オプションを使用して、ドラッグが許可される前にカーソルを押して指定したピクセルをドラッグするように設定します。 delay 选项设置延迟开始拖拽的毫秒数。通过 distance 选项设置光标被按下且拖拽指定像素后才允许拖拽。
实例
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI 拖动（Draggable） - Handles</title>
<link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
<script src="//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="jqueryui/style.css">
<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>您可以把我向四周拖拽…</p>
<p class="ui-widget-header">…但是您不可以在这个范围内拖拽我</p>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
事件
draggable 上的 start、drag 和 stop 事件。拖拽开始时触发 start 事件，拖拽期间触发 drag 事件，拖拽停止时触发 stop 事件。
实例
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI 拖动（Draggable） - 还原位置</title>
<link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
<script src="//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="jqueryui/style.css">
<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>运行实例 »
点击 "运行实例" 按钮查看在线实例
Handles
只有当光标在 draggable 上指定部分时才允许拖拽。使用 handle 选项来指定用于拖拽对象的元素（或元素组）的 jQuery 选择器。
或者当光标在 draggable 内指定元素（或元素组）上时不允许拖拽。使用 handle 选项来指定取消拖拽功能的 jQuery 选择器。
实例
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI 拖动（Draggable） - 对齐到元素或网格</title>
<link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
<script src="//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="jqueryui/style.css">
<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>运行实例 »
点击 "运行实例" 按钮查看在线实例
还原位置
当带有布尔值 revert
インスタンス
インスタンスの実行»「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します
🎜🎜🎜イベント🎜🎜 ドラッグ可能なイベントの<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI 拖动（Draggable） - 视觉反馈</title>
<link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
<script src="//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="jqueryui/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>インスタンスの実行»「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します
start、drag、stop。 start イベントはドラッグの開始時にトリガーされ、drag イベントはドラッグ中にトリガーされ、stop イベントはドラッグの停止時にトリガーされます。 🎜🎜🎜インスタンス🎜🎜<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI 拖动（Draggable） + 排序（Sortable）</title>
<link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
<script src="//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="jqueryui/style.css">
<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>🎜🎜🎜インスタンスの実行»🎜🎜「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します🎜🎜🎜🎜🎜🎜ハンドル🎜🎜 カーソルがドラッグ可能な部分の指定された部分にある場合にのみドラッグを許可します。 handle オプションを使用して、オブジェクトのドラッグに使用する要素 (または要素のグループ) の jQuery セレクターを指定します。 🎜 または、ドラッグ可能な機能内の特定の要素 (または要素のグループ) 上にカーソルがある場合は、ドラッグを禁止します。キャンセル オプションを使用して、ドラッグ可能な機能または要素グループを「キャンセル」する jQuery セレクターを指定します。 handle オプションを使用して、ドラッグ機能をキャンセルする jQuery セレクターを指定します。 🎜🎜🎜インスタンス🎜🎜rrreee🎜🎜🎜インスタンスの実行»🎜🎜「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します🎜🎜🎜🎜🎜🎜位置を復元🎜🎜 ブール値の revert オプションを使用してドラッグ可能オブジェクトのドラッグが停止したときに、ドラッグ可能オブジェクト (またはそのヘルパー) を元の位置に戻します。 🎜🎜🎜インスタンス🎜🎜rrreee🎜🎜🎜インスタンスの実行 »🎜🎜「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します🎜🎜要素またはグリッドに整列します
DOM 要素の内側または外側の境界にドラッグ可能に整列します。 snap、snapMode (inner、outer、両方)、および snapTolerance (スナップが有効な場合) を使用した、ドラッグ可能な要素と要素の間の距離 (ピクセル単位)。ユニットと呼ばれる）オプション。 snap、snapMode（inner, outer, both）和 snapTolerance（当调用对齐时，draggable 与元素之间的距离，以像素为单位）选项。
或者对齐 draggable 到网格。通过 grid 选项设置网格单元的尺寸（以像素为单位的高度或宽度）。
视觉反馈
给用户提供反馈，就像以助手方式拖拽对象一样。helper 选项接受值 'original'（用光标移动 draggable 对象），'clone'（用光标移动 draggable 的副本），或者一个返回 DOM 元素的函数（该元素在拖拽期间显示在光标附近）。通过 opacity 选项控制助手的透明度。
为了区别哪一个 draggable 正在被拖拽，让在运动中的 draggable 保持最前。如果正在拖拽，使用 zIndex 选项来设置助手的高度 z-index，或者使用 stack
grid オプションを使用して、グリッド セルの寸法 (ピクセル単位の高さまたは幅) を設定します。 ビジュアル フィードバック
アシスタント スタイルでオブジェクトをドラッグするのと同じように、ユーザーにフィードバックを提供します。 helper オプションは、「original」（カーソルを使用してドラッグ可能なオブジェクトを移動）、「clone」（カーソルを使用してドラッグ可能なオブジェクトのコピーを移動）、または DOM を返す関数の値を受け入れます。ドラッグ中にカーソルの近くに表示される要素)。 opacity オプションを使用してアシスタントの透明度を制御します。
どのドラッガブルがドラッグされているかを区別するには、移動するドラッガブルを前面に置いてください。ドラッグしている場合は、
インスタンスの実行 »
zIndex オプションを使用してアシスタントの高さの z-index を設定するか、stack オプションを使用してドラッグを停止するときに最後にドラッグしたものが確実に表示されるようにします。 item は常に同じグループ内の他のアイテムの上に表示されます。 インスタンス
インスタンスの実行 »
「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します
