指定した要素をマウスで移動できるようにします。
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>jQuery UI Draggable - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<link rel="stylesheet" href="/demos/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>
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>jQuery UI Draggable - Auto-scroll</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<link rel="stylesheet" href="/demos/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>
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>jQuery UI Draggable - Constrain movement</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<link rel="stylesheet" href="/demos/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>
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>jQuery UI Draggable - Cursor style</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<link rel="stylesheet" href="/demos/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>top:-5px, left:-5px</p>
</div>
<div id="draggable3" class="ui-widget-content">
<p>bottom: 0</p>
</div>
</body>
</html>
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>jQuery UI Draggable - Delay start</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<link rel="stylesheet" href="/demos/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>20pxドラッグすると、移動を開始します</p>
</div>
<div id="draggable2" class="ui-widget-content">
<p>ドラッグ開始後、距離に関係なく1000ms後に移動を開始します</p>
</div>
</body>
</html>
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>jQuery UI Draggable - Events</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<link rel="stylesheet" href="/demos/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 ) {
// first update the status visually...
if ( !$event_counter.hasClass( "ui-state-hover" ) ) {
$event_counter.addClass( "ui-state-hover" )
.siblings().removeClass( "ui-state-hover" );
}
// ...then update the numbers
$( "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>回</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>回</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>回</li>
</ul>
</div>
</body>
</html>
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>jQuery UI Draggable - Handles</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<link rel="stylesheet" href="/demos/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>
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>jQuery UI Draggable - Revert position</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<link rel="stylesheet" href="/demos/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>
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>jQuery UI Draggable - Snap to element or grid</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<link rel="stylesheet" href="/demos/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)は, 他の全てのドラッグ要素に吸着します。</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>
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>jQuery UI Draggable - Visual feedback</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<link rel="stylesheet" href="/demos/style.css" />
<style>
.docs {clear:both; margin-bottom: 2px;}
#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'>カスタムヘルパーです。</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>我々はドラッグ要素です…</p>
</div>
<div class="ui-widget-content">
<p>…z-indexは自動的に制御されます…</p>
</div>
<div class="ui-widget-content">
<p>…stackオプションによって</p>
</div>
</div>
</body>
</html>
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>jQuery UI Draggable + Sortable</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<link rel="stylesheet" href="/demos/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">項目 1</li>
<li class="ui-state-default">項目 2</li>
<li class="ui-state-default">項目 3</li>
<li class="ui-state-default">項目 4</li>
<li class="ui-state-default">項目 5</li>
</ul>
</body>
</html>
| オプション |
説明 |
| addClasses |
型：Boolean
初期値：true
falseが指定された場合、.ui-draggableのclassが追加されなくなります。
数百の要素に対して.draggable()を適用するようなパフォーマンスの最適化が望まれるようなケースで
必要になるかもしれません。
|
| appendTo |
型：jQuery or Element or Selector or String
初期値："parent"
ドラッグ中にドラッグのヘルパー的な役割を果たす要素を付与する要素を指定します。
- jQuery
-
ヘルパーを追加するjQueryオブジェクトを指定します。。
- Element
-
ヘルパーを追加する要素を指定します。
- Selector
-
ヘルパーを追加する要素をセレクターで指定します。
- String
-
"parent"を指定すると、ドラッグ要素の兄弟要素としてヘルパーが追加されます。
|
| axis |
型：String
初期値：false
ドラッグ可能な方向をx軸、y軸のどちらかで強制することが出来ます。
"x"を指定すれば垂直方向のみ、"y"を指定すれば水平方向のみにしかドラッグできなくなります。
|
| cancel |
型：Selector
初期値："input,textarea,button,select,option"
指定されたセレクター要素のドラッグをキャンセルします。
|
| connectToSortable |
型：Selector
初期値：false
指定されたSortableの要素に対してのドラッグ&ドロップを許可し、
ドロップされるとそのリストの一部となります。
並び替えが完璧に動作するためには、helperオプションに"clone"を指定する必要があり、
jQuery UI Sortableプラグインが必要です。
|
| containment |
型：Selector or Element or String or Array
初期値：false
- Selector
-
ドラッグ可能領域をセレクターで指定します。複数要素が該当する場合は1つ目の要素が対象になります。
該当する要素がなければ、ドラッグ可能領域は設定されません。
- Element
-
ここで指定された要素内がドラッグ可能領域になります。
- String
-
"parent"、"document"、"window"のいずれかの値を指定することが出来ます。
- Array
-
配列にて、[ x1, y1, x2, y2 ]の形式でドラッグ可能領域を指定します。
ドラッグ可能な範囲を要素または領域で指定します。
|
| cursor |
型：String
初期値："auto"
ドラッグ操作中のカーソルをCSSの形式で指定します。
|
| cursorAt |
型：Object
初期値：false
マウスカーソルとドラッグヘルパーの相対位置を設定します。
この値はハッシュで1つ、または2つのキーと値の組み合わせで指定します。(top, left, right, bottom)
$( ".selector" ).draggable({ cursorAt: { left: 5 } });
|
| delay |
型：Number
初期値：0
マウスを押下してからドラッグ可能になるまでの時間をミリ秒単位で指定します。
このオプションは要素をクリックして意図せずドラッグされてしまうような問題を防ぎます。
|
| disabled |
型：Boolean
初期値：false
trueを指定すると、ドラッグを無効化します。
|
| distance |
型：Number
初期値：1
要素のドラッグが始まるまでに、マウスを動かさなければいけない距離をpx単位で指定します。
このオプションは要素をクリックして意図せずドラッグされてしまうような問題を防ぎます。
|
| grid |
型:Array
初期値:false
指定した各xとyのピクセルのグリッド毎にドラッグ要素が揃うようになります。
[x, y]の形式の配列で指定します。
|
| handle |
型:Selector or Element
初期値:false
指定した場合、MouseDownイベントが指定した要素（複数可）に発生しない限り、
ドラッグを開始しません。
|
| helper |
型:String or Function()
初期値:"original"
- String
-
"clone"を指定すると、要素の複製が生成され、その複製がドラッグされます。
- Function
-
ドラッグに使用されるDOM要素を返す関数を指定します。
ドラッグ表示を示すヘルパー要素を指定します。
|
| iframeFix |
型:Boolean or Selector
初期値:false
- Boolean
-
trueが指定されると、ドラッグ中はページ内の各iframeに透明のレイヤーを被せます。
- Selector
-
このセレクターで指定されたiframeに透明のレイヤーを被せます。
ドラッグ中にMouseMoveイベントによるキャプチャからiframeを保護します。
cursorAtオプションと組み合わせて使用する場合、またはマウスカーソルがヘルパー上に無い可能性があるような場合に有用です。
|
| opacity |
型:Number
初期値:false
ドラッグ中の要素の透明度を指定します。
|
| refreshPositions |
型:Boolean
初期値:false
trueを指定すると、全てのドロップ可能な位置をMouseMoveイベント毎に計算されます。
警告)これは非常に動的なページで有用ですが、パフォーマンスが劇的に低下します。
|
| revert |
型:Boolean or String
初期値:false
- Boolean
-
trueが指定されると、要素は常にスタート位置に戻ります。
- String
-
"invalid"が指定されると、ドロップ可能な要素にドロップされないとスタート位置に戻るようになります。
"valid"はこれの反対の動作を行います。
ドラッグ操作を止めた際に、元のスタート位置に要素を戻すか否かを指定します。
|
| revertDuration |
型:Number
初期値:500
revertのアニメーション時間をミリ秒単位で指定します。
revertオプションがfalseの場合は、このオプションは無視されます。
|
| scope |
型:String
初期値:"default"
ドロップ可能な要素のacceptオプションに加えて、
ドラッグとドロップ可能なアイテムのセットをグループ化するために使用されます。
ドロップ可能な要素と同じスコープ内にある、ドラッグ可能な要素のドロップを受け入れます。
|
| scroll |
型:Boolean
初期値:true
trueが指定されると、内包しているコンテナがドラッグに合わせて自動的にスクロールされるようになります。
|
| scrollSensitivity |
型:Number
初期値:20
スクロールが発生するまでの端からの距離をピクセル単位で指定します。
距離はポインタではなく、ドラッグ要素を基準にしています。
scrollオプションがfalseの場合は無視されます。
|
| scrollSpeed |
型:Number
初期値:20
scrollSensitivityによってスクロールされる際のスピードを指定します。
scrollオプションがfalseの場合は無視されます。
|
| snap |
型:Boolean or Selector
初期値:false
- Boolean
-
trueが指定されると、他のドラッグ可能な全ての要素に吸着するようになります。
- Selector
-
吸着させたい要素をセレクターで指定します。
ドラッグ要素が他の要素に吸着するか否かを指定します。
|
| snapMode |
型:String
初期値:"both"
どの部分の端に対して、ドラッグ要素が吸着するかを決定します。
snapオプションがfalseの場合は無視されます。
指定可能な値は、"inner"(内部), "outer"(外部), "both"(両方)です。
|
| snapTolerance |
型:Number
初期値:20
吸着が発生する距離をピクセル単位で指定します。
snapオプションがfalseの場合は無視されます。
|
| stack |
型:Selector
初期値:false
セレクターにマッチした要素を、現在ドラッグされている要素よりも前に表示されるようにz-indexを制御します。
|
| zIndex |
型:Number
初期値:false
ドラッグ時のz-indexの値を指定します。
|
| メソッド | 説明 |
| destroy() |
ドラッグの機能を完全に削除します。
$( ".selector" ).spinner( "destroy" );
|
| disable() |
ドラッグを無効化します。
|
| enable() |
ドラッグを有効にします。
|
| option( optionName ) |
戻り値：Object
optionNameに指定したオプションの現在の値を取得します。
- optionName
-
型：
String
取得したいオプションの名前を指定します。
|
| option() |
戻り値：PlainObject
オプションの各キーと値がペアとなったオブジェクトを返します。
|
| option( optionName, value ) |
引数のoptionNameのオプションに値を設定します。
- optionName
-
型：
String
設定したいオプションの名前を指定します。
- value
-
型：
Object
設定したい値を指定します。
|
| option( options ) |
オプションに設定したい各キーと値がペアとなったオブジェクトを指定します。
- option
-
型：
Object
設定したいオプションのキーと名前のペアを指定します。
|
| widget() |
戻り値：Object
ドラッグを含めたjQueryオブジェクトを返します。
|
| イベント |
説明 |
| create( event, ui ) |
型：dragcreate
ドラッグ要素が生成された際にトリガされます。
$( ".selector" ).draggable({
create: function( event, ui ) {}
});
$( ".selector" ).on( "dragcreate", function( event, ui ) {} );
|
| drag( event, ui ) |
型：drag
要素をドラッグして動かしている間、トリガされ続けます。
- ui.helper
-
型:
jQuery
ドラッグされている要素(ヘルパー)をjQueryオブジェクトで取得します。
- ui.position
-
型:
Object
その時点のドラッグ要素のpositionを{top, left}のオブジェクトの形式で取得します。
- ui.offset
-
型:
Object
その時点のドラッグ要素のoffsetを{top, left}のオブジェクトの形式で取得します。
|
| start( event, ui ) |
型：dragstart
ドラッグがスタートする際に、トリガされます。
- ui.helper
-
型:
jQuery
ドラッグされている要素(ヘルパー)をjQueryオブジェクトで取得します。
- ui.position
-
型:
Object
その時点のドラッグ要素のpositionを{top, left}のオブジェクトの形式で取得します。
- ui.offset
-
型:
Object
その時点のドラッグ要素のoffsetを{top, left}のオブジェクトの形式で取得します。
|
| stop( event, ui ) |
型：dragstop
ドラッグが終了する際に、トリガされます。
- ui.helper
-
型:
jQuery
ドラッグされている要素(ヘルパー)をjQueryオブジェクトで取得します。
- ui.position
-
型:
Object
その時点のドラッグ要素のpositionを{top, left}のオブジェクトの形式で取得します。
- ui.offset
-
型:
Object
その時点のドラッグ要素のoffsetを{top, left}のオブジェクトの形式で取得します。
|
Back to top