マウスを使ってリスト上またはグリッド上にて、マウスを使ってリスト順を変更できる要素にします。
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>jQuery UI Sortable - 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>
#sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }
#sortable li span { position: absolute; margin-left: -1.3em; }
</style>
<script>
$(function() {
$( "#sortable" ).sortable();
$( "#sortable" ).disableSelection();
});
</script>
</head>
<body>
<ul id="sortable">
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>項目 1</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>項目 2</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>項目 3</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>項目 4</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>項目 5</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>項目 6</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>項目 7</li>
</ul>
</body>
</html>
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>jQuery UI Sortable - Connect lists</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>
#sortable1, #sortable2 { list-style-type: none; margin: 0; padding: 0 0 2.5em; float: left; margin-right: 10px; }
#sortable1 li, #sortable2 li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 120px; }
</style>
<script>
$(function() {
$( "#sortable1, #sortable2" ).sortable({
connectWith: ".connectedSortable"
}).disableSelection();
});
</script>
</head>
<body>
<ul id="sortable1" class="connectedSortable">
<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>
<ul id="sortable2" class="connectedSortable">
<li class="ui-state-highlight">項目 1</li>
<li class="ui-state-highlight">項目 2</li>
<li class="ui-state-highlight">項目 3</li>
<li class="ui-state-highlight">項目 4</li>
<li class="ui-state-highlight">項目 5</li>
</ul>
</body>
</html>
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>jQuery UI Sortable - Connect lists with Tabs</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>
#sortable1 li, #sortable2 li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 120px; }
</style>
<script>
$(function() {
$( "#sortable1, #sortable2" ).sortable().disableSelection();
var $tabs = $( "#tabs" ).tabs();
var $tab_items = $( "ul:first li", $tabs ).droppable({
accept: ".connectedSortable li",
hoverClass: "ui-state-hover",
drop: function( event, ui ) {
var $item = $( this );
var $list = $( $item.find( "a" ).attr( "href" ) )
.find( ".connectedSortable" );
ui.draggable.hide( "slow", function() {
$tabs.tabs( "option", "active", $tab_items.index( $item ) );
$( this ).appendTo( $list ).show( "slow" );
});
}
});
});
</script>
</head>
<body>
<div id="tabs">
<ul>
<li><a href="#tabs-1">タブ1(ドロップしてください)</a></li>
<li><a href="#tabs-2">タブ2(ドロップしてください)</a></li>
</ul>
<div id="tabs-1">
<ul id="sortable1" class="connectedSortable ui-helper-reset">
<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>
</div>
<div id="tabs-2">
<ul id="sortable2" class="connectedSortable ui-helper-reset">
<li class="ui-state-highlight">項目 1</li>
<li class="ui-state-highlight">項目 2</li>
<li class="ui-state-highlight">項目 3</li>
<li class="ui-state-highlight">項目 4</li>
<li class="ui-state-highlight">項目 5</li>
</ul>
</div>
</div>
</body>
</html>
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>jQuery UI Sortable - 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>
#sortable1, #sortable2 { list-style-type: none; margin: 0; padding: 0; margin-bottom: 15px;zoom: 1; }
#sortable1 li, #sortable2 li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 95%; }
</style>
<script>
$(function() {
$( "#sortable1" ).sortable({
delay: 300
});
$( "#sortable2" ).sortable({
distance: 15
});
$( "li" ).disableSelection();
});
</script>
</head>
<body>
<h3 class="docs">300ms遅延:</h3>
<ul id="sortable1">
<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>
</ul>
<h3 class="docs">15px遅延:</h3>
<ul id="sortable2">
<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>
</ul>
</body>
</html>
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>jQuery UI Sortable - Display as 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>
#sortable { list-style-type: none; margin: 0; padding: 0; width: 450px; }
#sortable li { margin: 3px 3px 3px 0; padding: 1px; float: left; width: 100px; height: 90px; font-size: 4em; text-align: center; }
</style>
<script>
$(function() {
$( "#sortable" ).sortable();
$( "#sortable" ).disableSelection();
});
</script>
</head>
<body>
<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>
<li class="ui-state-default">6</li>
<li class="ui-state-default">7</li>
<li class="ui-state-default">8</li>
<li class="ui-state-default">9</li>
<li class="ui-state-default">10</li>
<li class="ui-state-default">11</li>
<li class="ui-state-default">12</li>
</ul>
</body>
</html>
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>jQuery UI Sortable - Drop placeholder</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>
#sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#sortable li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; height: 1.5em; }
html>body #sortable li { height: 1.5em; line-height: 1.2em; }
.ui-state-highlight { height: 1.5em; line-height: 1.2em; }
</style>
<script>
$(function() {
$( "#sortable" ).sortable({
placeholder: "ui-state-highlight"
});
$( "#sortable" ).disableSelection();
});
</script>
</head>
<body>
<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>
<li class="ui-state-default">項目 6</li>
<li class="ui-state-default">項目 7</li>
</ul>
</body>
</html>
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>jQuery UI Sortable - Handle empty lists</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>
#sortable1, #sortable2, #sortable3 { list-style-type: none; margin: 0; padding: 0; float: left; margin-right: 10px; background: #eee; padding: 5px; width: 143px;}
#sortable1 li, #sortable2 li, #sortable3 li { margin: 5px; padding: 5px; font-size: 1.2em; width: 120px; }
</style>
<script>
$(function() {
$( "ul.droptrue" ).sortable({
connectWith: "ul"
});
$( "ul.dropfalse" ).sortable({
connectWith: "ul",
dropOnEmpty: false
});
$( "#sortable1, #sortable2, #sortable3" ).disableSelection();
});
</script>
</head>
<body>
<ul id="sortable1" class="droptrue">
<li class="ui-state-default">空のリストに..</li>
<li class="ui-state-default">..ドロップ可能</li>
<li class="ui-state-default">項目 3</li>
<li class="ui-state-default">項目 4</li>
<li class="ui-state-default">項目 5</li>
</ul>
<ul id="sortable2" class="dropfalse">
<li class="ui-state-highlight">空のリストに..</li>
<li class="ui-state-highlight">..ドロップ不可</li>
<li class="ui-state-highlight">項目 3</li>
<li class="ui-state-highlight">項目 4</li>
<li class="ui-state-highlight">項目 5</li>
</ul>
<!-- 空のリスト -->
<ul id="sortable3" class="droptrue">
</ul>
<br style="clear: both;" />
</body>
</html>
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>jQuery UI Sortable - Include / exclude items</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>
#sortable1, #sortable2 { list-style-type: none; margin: 0; padding: 0; zoom: 1; }
#sortable1 li, #sortable2 li { margin: 0 5px 5px 5px; padding: 3px; width: 90%; }
</style>
<script>
$(function() {
$( "#sortable1" ).sortable({
items: "li:not(.ui-state-disabled)"
});
$( "#sortable2" ).sortable({
cancel: ".ui-state-disabled"
});
$( "#sortable1 li, #sortable2 li" ).disableSelection();
});
</script>
</head>
<body>
<h3 class="docs">並び替え要素を指定(.ui-state-disabledは除外):</h3>
<ul id="sortable1">
<li class="ui-state-default">項目 1</li>
<li class="ui-state-default ui-state-disabled">(並び替え要素、またはドロップ対象ではない)</li>
<li class="ui-state-default ui-state-disabled">(並び替え要素、またはドロップ対象ではない)</li>
<li class="ui-state-default">項目 4</li>
</ul>
<h3 class="docs">並び替えキャンセル(ドロップ対象としては機能する):</h3>
<ul id="sortable2">
<li class="ui-state-default">項目 1</li>
<li class="ui-state-default ui-state-disabled">(並び替え要素ではない)</li>
<li class="ui-state-default ui-state-disabled">(並び替え要素ではない)</li>
<li class="ui-state-default">項目 4</li>
</ul>
</body>
</html>
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>jQuery UI Sortable - Portlets</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>
.column { width: 160px; float: left; padding-bottom: 100px; }
.portlet { margin: 0 1em 1em 0; }
.portlet-header { margin: 0.3em; padding-bottom: 4px; padding-left: 0.2em; }
.portlet-header .ui-icon { float: right; }
.portlet-content { padding: 0.4em; }
.ui-sortable-placeholder { border: 1px dotted black; visibility: visible !important; height: 50px !important; }
.ui-sortable-placeholder * { visibility: hidden; }
</style>
<script>
$(function() {
$( ".column" ).sortable({
connectWith: ".column"
});
$( ".portlet" ).addClass( "ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" )
.find( ".portlet-header" )
.addClass( "ui-widget-header ui-corner-all" )
.prepend( "<span class='ui-icon ui-icon-minusthick'></span>")
.end()
.find( ".portlet-content" );
$( ".portlet-header .ui-icon" ).click(function() {
$( this ).toggleClass( "ui-icon-minusthick" ).toggleClass( "ui-icon-plusthick" );
$( this ).parents( ".portlet:first" ).find( ".portlet-content" ).toggle();
});
$( ".column" ).disableSelection();
});
</script>
</head>
<body>
<div class="column">
<div class="portlet">
<div class="portlet-header">フィード</div>
<div class="portlet-content">利用可能です。お問い合わせください。</div>
</div>
<div class="portlet">
<div class="portlet-header">ニュース</div>
<div class="portlet-content">利用可能です。お問い合わせください。</div>
</div>
</div>
<div class="column">
<div class="portlet">
<div class="portlet-header">ショッピング</div>
<div class="portlet-content">利用可能です。お問い合わせください。</div>
</div>
</div>
<div class="column">
<div class="portlet">
<div class="portlet-header">リンク</div>
<div class="portlet-content">利用可能です。お問い合わせください。</div>
</div>
<div class="portlet">
<div class="portlet-header">画像</div>
<div class="portlet-content">利用可能です。お問い合わせください。</div>
</div>
</div>
</body>
</html>
jQuery UI Sortableプラグインは、選択した要素をマウスによって並べ替え可能な要素にします。
テーブル行に適用したい場合は、tableではなくtbodyに指定しなければいけません。
| オプション |
説明 |
| appendTo |
型：jQuery or Element or Selector or String
初期値："parent"
選択した要素をドラッグ移動する際のヘルパー要素が挿入される場所を指定します。
(z-indexによる重なりなどの問題に対処するため)
- jQuery
-
ヘルパーを挿入する要素をjQueryオブジェクトで指定します。
- Element
-
ヘルパーを挿入する要素を指定します。
- Selector
-
ヘルパーを挿入する要素をセレクターで指定します。
- String
-
"parent"文字列を指定すると、ヘルパーは並び替え要素の兄弟要素になります。
$( ".selector" ).sortable({ appendTo: document.body });
// getter
var appendTo = $( ".selector" ).sortable( "option", "appendTo" );
// setter
$( ".selector" ).sortable( "option", "appendTo", document.body );
|
| axis |
型：String
初期値：false
ドラッグ出来る方向を、水平方向または垂直方向に限定することができます。
指定可能な値は、"x"と"y"です。
|
| cancel |
型：Selector
初期値：":input,button"
マッチした要素の並び替え処理が開始されることをキャンセルします。
|
| connectWith |
型：Selector
初期値：false
別の並び替え要素のセレクタを指定することで、リスト項目が接続(連携)されます。
この指定はあくまで一方からの関係性を示すものなので、もし双方向での接続が必要な場合は、両方の並び替え要素のオプションで
connectWithオプションを指定しなければいけません。
|
| containment |
型：Element or Selector or String
初期値：false
並び替え要素がドラッグできる範囲を指定します。
指定された要素は、計算された(可能な?)widthとheightを持っている必要があります。(それが明示的に指定されている必要はありません)
例えば、float:leftの指定によって実質的にheightが0とみなされると、このオプションの指定は無効になります。
- Element
-
ドラッグ可能範囲を要素で指定します。
- Selector
-
ドラッグ可能範囲の要素をセレクターで指定します。
- String
-
ドラッグ可能範囲の要素を文字列で指定します。
指定可能な値は、"parent"、"document"、"window"です。
|
| cursor |
型：String
初期値："auto"
並び替えドラッグ時に表示するカーソルを指定します。
|
| cursorAt |
型：Object
初期値：false
並び替え要素、またはヘルパーをドラッグ移動するカーソルは常に同じ位置にあります。
1つ、または2つのハッシュの組み合わせを指定することで、この位置を調整することが可能です。{top, left, right, botto}
$( ".selector" ).sortable({ cursorAt: { left: 5 } });
|
| delay |
型：Integer
初期値：0
並び替えを開始するまでの時間をミリ秒単位で指定します。
この遅延処理を加えることで、クリックした際にドラッグの誤操作を防ぐ助けになります。
|
| disabled |
型：Boolean
初期値：false
trueを指定すると、並び替え処理を無効化します。
|
| distance |
型：Number
初期値：1
ソートを開始する距離をピクセル単位で指定します。
このオプションを指定すると、並び替え要素はドラッグしたマウスが指定された距離を超えるまで
並び替え処理を開始しません。
要素のクリックも可能にしたい場合に使用されます。
|
| dropOnEmpty |
型：Boolean
初期値：true
falseに指定した場合、並び替え要素を空の接続(連携)要素にドロップすることが出来なくなります。
(coonectWithオプションを確認してください)
|
| forceHelperSize |
型：Boolean
初期値：false
trueが指定された場合、ヘルパーはサイズを持つことを強制されます。
|
| forcePlaceholderSize |
型：Boolean
初期値：false
trueが指定された場合、プレースホルダ(正式に要素が入るまでの代替)はサイズを持つことを強制されます。
|
| grid |
型：Array
初期値：false
並び替え要素、またはヘルパーを吸着させるグリッドをピクセル単位で指定します。
[x,y]の配列の形式で指定します。
|
| handle |
型：Selector or Element
初期値：false
指定された要素にクリックして並び替えを開始することを強制します。
|
| helper |
型：String or Function
初期値："original"
ドラッグ時に表示するヘルパー要素を指定します。
- String
-
もし、"clone"を指定すれば、その要素のクローンが生成されドラッグのヘルパーになります。
- Function
-
ドラッグのヘルパーとする要素を戻り値として返す関数を指定します。
この要素はeventと並び替えようとしている要素を引数として受け取ります。
|
| items |
型：Selector
初期値："> *"
並び替え機能を付与したい要素をセレクターとして指定します。
|
| opacity |
型：Number
初期値：false
並び替え時のヘルパーの透明度を0.01～1の数値で指定します。
|
| placeholder |
型：String
初期値：false
プレースホルダのclass名を指定します。
指定が無ければ空白になります。
|
| revert |
型：Boolean or Number
初期値：false
並び替え要素が新しい位置に配置される(戻される)際に、滑らかなアニメーションを使用するか否かを指定します。
(falseの場合は、ドラッグを離した瞬間に、即座に新しい位置に配置されます。)
- Boolean
-
trueが指定されると、デフォルトのdurationでアニメーションします。
- Number
-
アニメーションのdurationをミリ秒単位で指定します。
|
| scroll |
型：Boolean
初期値：true
端に要素がドラッグされた際に、ページがスクロールするか否かを指定します。
|
| scrollSensitivity |
型：Number
初期値：20
マウスポインタがどれだけ近づいたらスクロールを開始するのかを指定します。
|
| scrollSpeed |
型:Number
初期値:20
scrollSensitivityの範囲内にマウスポインタが入った際に、
スクロールする速度を指定します。
|
| tolerance |
型:String
初期値:"intersect"
項目が入れ替わる重なり具合のモードを指定します。
- "intersect"
-
少なくとも50%重なったら入れ替わります。
- "pointer"
-
マウスポインターが重なったら入れ替わります。
|
| zIndex |
型:Integer
初期値:1000
並び替え時の要素、ヘルパーのz-index指定になります。
|
| メソッド | 説明 |
| cancel() |
ソートによる変更をキャンセルし、ソートが開始される直前の状態に戻します。
$( ".selector" ).sortable( "cancel" );
|
| destroy() |
並び替え機能を完全に削除します。
|
| disable() |
並び替え機能を無効化します。
|
| enable() |
並び替え機能を有効にします。
|
| option( optionName ) |
戻り値：Object
optionNameに指定したオプションの現在の値を取得します。
- optionName
-
型：
String
取得したいオプションの名前を指定します。
|
| option() |
戻り値：PlainObject
オプションの各キーと値がペアとなったオブジェクトを返します。
|
| option( optionName, value ) |
引数のoptionNameのオプションに値を設定します。
- optionName
-
型：
String
設定したいオプションの名前を指定します。
- value
-
型：
Object
設定したい値を指定します。
|
| option( options ) |
オプションに設定したい各キーと値がペアとなったオブジェクトを指定します。
- option
-
型：
Object
設定したいオプションのキーと名前のペアを指定します。
|
| refresh() |
並び替えの項目の要素をリフレッシュします。
全ての並び替え要素のリロードをトリガし、新しい項目を認識します。
|
| refreshPositions() |
並び替え要素のキャッシュされたポジションをリフレッシュします。
|
| serialize( options ) |
戻り値：string
並び替え要素のID群をform/ajaxで送信できる文字列にシリアライズします。
このメソッドによってURLに付加するハッシュ文字列が生成され、新しい順序の情報を簡単にサーバに送信することが出来ます。
デフォルトでは、"setname_number"のフォーマットで並び替え要素のidを探し、ハッシュは
"setname[]=number&setname[]=number"のようにして出力します。
注).もし、シリアライズが空の文字列を返した場合、id属性にアンダースコアが含まれていないか確認してください。
各id属性は"set_number"の形式である必要があり、例えばid属性が"foo_1","foo_5","foo_2"の3つの要素の
リストが存在した場合、"foo[]=1&foo[]=5&foo[]=2"のように出力します。
アンダースコア、イコール、ハイフンがsetとnumberの区切り文字列として使用可能です。
例えば、"foo=1"、"foo-1"、"foo_1"は全て"foo[]=1"にシリアライズします。
引数optionsには、シリアライズ化のカスタマイズをオブジェクトのハッシュ形式で指定します。
- key
-
初期値:
区切り文字の前半部分
型:String
指定すると、それがキーとして使用されます。
- attribute
-
初期値:
"id"
型:String
シリアライズに使用される値を持つ属性名を指定します。
- expression
-
初期値:
/(.+)[-=_](.+)/
型:RegExp
キーと値を区切るための正規表現を指定します。
|
| toArray() |
戻り値：Array
並び替え要素のid文字列を格納した配列を返します。
|
| widget() |
戻り値：Object
並び替え要素を含めたjQueryオブジェクトを返します。
|
| イベント |
説明 |
| activate( event, ui ) |
型：sortactivate
接続リスト(connectWithオプション参照)を使用する場合にこのイベントがトリガされ、ドラッグ開始時に接続中のすべてのリストがそれを受信します。
- ui.helper
-
型:
jQuery
並び替えヘルパーのjQueryオブジェクトです。
- ui.item
-
型:
jQuery
現在ドラッグされている要素のjQueryオブジェクトです。
- ui.offset
-
型:
Object
ヘルパーの絶対位置を表す{top, left}のオブジェクトです。
- ui.position
-
型:
Object
ヘルパーの位置を表す{top, left}のオブジェクトです。
- ui.originalPosition
-
型:
Object
要素の位置を表す{top, left}のオブジェクトです。
- ui.sender
-
型:
jQuery
他の並び替え要素から送られてきた別の並び替え要素です。
$( ".selector" ).sortable({
activate: function( event, ui ) {}
});
$( ".selector" ).on( "sortactivate", function( event, ui ) {} );
|
| beforeStop( event, ui ) |
型：sortbeforestop
並び替え操作を停止したが、プレースホルダ／ヘルパーがまだ使用可能な際にトリガされます。
- ui.helper
-
型:
jQuery
並び替えヘルパーのjQueryオブジェクトです。
- ui.item
-
型:
jQuery
現在ドラッグされている要素のjQueryオブジェクトです。
- ui.offset
-
型:
Object
ヘルパーの絶対位置を表す{top, left}のオブジェクトです。
- ui.position
-
型:
Object
ヘルパーの位置を表す{top, left}のオブジェクトです。
- ui.originalPosition
-
型:
Object
要素の位置を表す{top, left}のオブジェクトです。
- ui.sender
-
型:
jQuery
他の並び替え要素から送られてきた別の並び替え要素です。
|
| change( event, ui ) |
型：sortchange
並び替えの間、DOMのpositionが変更されるとトリガされます。
- ui.helper
-
型:
jQuery
並び替えヘルパーのjQueryオブジェクトです。
- ui.item
-
型:
jQuery
現在ドラッグされている要素のjQueryオブジェクトです。
- ui.offset
-
型:
Object
ヘルパーの絶対位置を表す{top, left}のオブジェクトです。
- ui.position
-
型:
Object
ヘルパーの位置を表す{top, left}のオブジェクトです。
- ui.originalPosition
-
型:
Object
要素の位置を表す{top, left}のオブジェクトです。
- ui.sender
-
型:
jQuery
他の並び替え要素から送られてきた別の並び替え要素です。
|
| create( event, ui ) |
型：sortcreate
並び替え要素が生成された際にトリガされます。
|
| deactivate( event, ui ) |
型：sortdeactivate
ソートが停止されたときにこのイベントがトリガされ、
これがトリガされると、すべての接続リストに伝播されます。
- ui.helper
-
型:
jQuery
並び替えヘルパーのjQueryオブジェクトです。
- ui.item
-
型:
jQuery
現在ドラッグされている要素のjQueryオブジェクトです。
- ui.offset
-
型:
Object
ヘルパーの絶対位置を表す{top, left}のオブジェクトです。
- ui.position
-
型:
Object
ヘルパーの位置を表す{top, left}のオブジェクトです。
- ui.originalPosition
-
型:
Object
要素の位置を表す{top, left}のオブジェクトです。
- ui.sender
-
型:
jQuery
他の並び替え要素から送られてきた別の並び替え要素です。
|
| out( event, ui ) |
型：sortout
接続リストに並び替え項目が移動された際にトリガれさます。
|
| over( event, ui ) |
型：sortover
接続リストに並び替え項目が移動してきた際にトリガれさます。
- ui.helper
-
型:
jQuery
並び替えヘルパーのjQueryオブジェクトです。
- ui.item
-
型:
jQuery
現在ドラッグされている要素のjQueryオブジェクトです。
- ui.offset
-
型:
Object
ヘルパーの絶対位置を表す{top, left}のオブジェクトです。
- ui.position
-
型:
Object
ヘルパーの位置を表す{top, left}のオブジェクトです。
- ui.originalPosition
-
型:
Object
要素の位置を表す{top, left}のオブジェクトです。
- ui.sender
-
型:
jQuery
他の並び替え要素から送られてきた別の並び替え要素です。
|
| receive( event, ui ) |
型：sortreceive
接続リストが他のリストから並び替え項目を受け取った際にトリガされます。
- ui.helper
-
型:
jQuery
並び替えヘルパーのjQueryオブジェクトです。
- ui.item
-
型:
jQuery
現在ドラッグされている要素のjQueryオブジェクトです。
- ui.offset
-
型:
Object
ヘルパーの絶対位置を表す{top, left}のオブジェクトです。
- ui.position
-
型:
Object
ヘルパーの位置を表す{top, left}のオブジェクトです。
- ui.originalPosition
-
型:
Object
要素の位置を表す{top, left}のオブジェクトです。
- ui.sender
-
型:
jQuery
他の並び替え要素から送られてきた別の並び替え要素です。
|
| remove( event, ui ) |
型：sortremove
並び替え項目がリストからドラッグされて別のリストに移動された際に、トリガされます。
- ui.helper
-
型:
jQuery
並び替えヘルパーのjQueryオブジェクトです。
- ui.item
-
型:
jQuery
現在ドラッグされている要素のjQueryオブジェクトです。
- ui.offset
-
型:
Object
ヘルパーの絶対位置を表す{top, left}のオブジェクトです。
- ui.position
-
型:
Object
ヘルパーの位置を表す{top, left}のオブジェクトです。
- ui.originalPosition
-
型:
Object
要素の位置を表す{top, left}のオブジェクトです。
- ui.sender
-
型:
jQuery
他の並び替え要素から送られてきた別の並び替え要素です。
|
| sort( event, ui ) |
型：sort
並び替えの間、トリガされます。
- ui.helper
-
型:
jQuery
並び替えヘルパーのjQueryオブジェクトです。
- ui.item
-
型:
jQuery
現在ドラッグされている要素のjQueryオブジェクトです。
- ui.offset
-
型:
Object
ヘルパーの絶対位置を表す{top, left}のオブジェクトです。
- ui.position
-
型:
Object
ヘルパーの位置を表す{top, left}のオブジェクトです。
- ui.originalPosition
-
型:
Object
要素の位置を表す{top, left}のオブジェクトです。
- ui.sender
-
型:
jQuery
他の並び替え要素から送られてきた別の並び替え要素です。
|
| start( event, ui ) |
型：sortstart
並び替えが開始した際にトリガされます。
- ui.helper
-
型:
jQuery
並び替えヘルパーのjQueryオブジェクトです。
- ui.item
-
型:
jQuery
現在ドラッグされている要素のjQueryオブジェクトです。
- ui.offset
-
型:
Object
ヘルパーの絶対位置を表す{top, left}のオブジェクトです。
- ui.position
-
型:
Object
ヘルパーの位置を表す{top, left}のオブジェクトです。
- ui.originalPosition
-
型:
Object
要素の位置を表す{top, left}のオブジェクトです。
- ui.sender
-
型:
jQuery
他の並び替え要素から送られてきた別の並び替え要素です。
|
| stop( event, ui ) |
型：sortstop
並び替え処理がを停止した際にトリガされます。
- ui.helper
-
型:
jQuery
並び替えヘルパーのjQueryオブジェクトです。
- ui.item
-
型:
jQuery
現在ドラッグされている要素のjQueryオブジェクトです。
- ui.offset
-
型:
Object
ヘルパーの絶対位置を表す{top, left}のオブジェクトです。
- ui.position
-
型:
Object
ヘルパーの位置を表す{top, left}のオブジェクトです。
- ui.originalPosition
-
型:
Object
要素の位置を表す{top, left}のオブジェクトです。
- ui.sender
-
型:
jQuery
他の並び替え要素から送られてきた別の並び替え要素です。
|
| update( event, ui ) |
型：sortupdate
並び替え処理がを停止し、DOMのpositionが変更された際にトリガされます。
- ui.helper
-
型:
jQuery
並び替えヘルパーのjQueryオブジェクトです。
- ui.item
-
型:
jQuery
現在ドラッグされている要素のjQueryオブジェクトです。
- ui.offset
-
型:
Object
ヘルパーの絶対位置を表す{top, left}のオブジェクトです。
- ui.position
-
型:
Object
ヘルパーの位置を表す{top, left}のオブジェクトです。
- ui.originalPosition
-
型:
Object
要素の位置を表す{top, left}のオブジェクトです。
- ui.sender
-
型:
jQuery
他の並び替え要素から送られてきた別の並び替え要素です。
|
Back to top