jqueryのドラッグメソッド例sortable_jqueryの詳細説明

すべてのイベント コールバック関数には 2 つのパラメーターがあります。event と ui、ブラウザー独自のイベント オブジェクト、およびカプセル化された ui オブジェクト
ui.helper - 並べ替え可能な要素を表す JQuery オブジェクトで、通常は現在の要素
ui のクローンです。 Position - 現在のオブジェクトに対するマウスの座標値オブジェクト {top,left} を表します
ui.offset - 現在のページ
ui に対するマウスの座標値オブジェクト {top,left} を表します。 item - 現在ドラッグされている要素を表します。
ui.placeholder - プレースホルダー (定義されている場合)
ui.sender - 現在ドラッグされている要素が属する並べ替え可能なオブジェクト (要素が別の並べ替え可能なオブジェクトから渡された場合のみ) 必要な場合に役立ちます)

・Parameter (パラメータ名: パラメータの種類: デフォルト値)
appendTo : String : 'parent'
ドラッグ中にマウスで移動するヘルパーをどこに追加するかを定義します(forたとえば、重複/zIndex の問題を解決する場合)。
Initial: $('.selector').sortable({ appendTo: 'body' });
Get: var appendTo = $('.selector' )。 sortable('option', 'appendTo');
設定: $('.selector').sortable('option', 'appendTo', 'body');

軸: 文字列: false
設定すると、要素は水平または垂直にのみドラッグできます。オプションの値: 'x'、'y'
初期値: $('.selector').sortable({ axis: 'x' });
取得: var axis = $('.selector') 。 sortable('option', 'axis');
設定: $('.selector').sortable('option', 'axis', 'x');

キャンセル : セレクター : ' :input,button'
一致する要素に対して並べ替えアクションが発生しないようにします。
初期値: $('.selector').sortable({ cancel: 'button' });
取得: var cancel = $('.selector').sortable('option', 'cancel') ;
Settings: $('.selector').sortable('option', 'cancel', 'button');

connectWith : Selector : false
並べ替え可能なオブジェクトの接続を許可します別の並べ替え可能なオブジェクトでは、項目要素を別のオブジェクトにドラッグできます。
初期値: $('.selector').sortable({ connectWith: '.otherlist' });
取得: var connectWith = $('.selector').sortable('option', 'connectWith' );
設定: $('.selector').sortable('option', 'connectWith', '.otherlist');

包含: 要素、文字列、セレクター: false
制約並べ替えアクションは、指定された範囲内でのみ実行できます。オプションの値: DOM オブジェクト、'parent'、'document'、'window'、または jQuery オブジェクト
Initial: $('.selector').sortable({ containment: 'parent' });
Get : var containment = $('.selector').sortable('option', 'containment');
設定: $('.selector').sortable('option', 'containment', 'parent') ;

cursor : String : 'auto'
並べ替えアクションを開始するときのスタイルを定義します。
初期値: $('.selector').sortable({ カーソル: 'crosshair' });
取得: var Cursor = $('.selector').sortable('option', 'cursor') ;
設定: $('.selector').sortable('option', 'cursor', 'crosshair');

cursorAt : Object : false
移動開始時のマウスの位置一定位置（2方向まで）オプションの値: { 上、左、右、下 }。
初期値: $('.selector').sortable({cursorAt: 'top' }); ').sortable('option', 'cursorAt');
設定: $('.selector').sortable('option', 'cursorAt', 'top');

遅延:整数 : 0
並べ替えアクションをアクティブにするまでの遅延をミリ秒単位で設定します。このパラメータにより、誤ったクリックが防止されます。
初期値: $('.selector').sortable({ 遅延: 500 });
取得: var late = $('.selector').sortable('option', 'delay'); 🎜>Settings: $('.selector').sortable('option', 'delay', 500);

distance : Integer : 1
上に少なくとも何ピクセルドラッグするかを決定した後、要素を使用すると、並べ替えアクションが正式にトリガーされます。
初期値: $('.selector').sortable({ distance: 30 });
取得: var distance = $('.selector').sortable('option', ' distance'); 🎜>設定: $('.selector').sortable('option', ' distance', 30);

dropOnEmpty: Boolean: true
空の並べ替え可能なオブジェクトへのドラッグが許可されるかどうか。
初期値: $('.selector').sortable({dropOnEmpty: false });
取得: vardropOnEmpty = $('.selector').sortable('option', 'dropOnEmpty'); 🎜>Settings: $('.selector').sortable('option', 'dropOnEmpty', false);

forceHelperSize : Boolean : false
true の場合、ヘルパーにサイズを強制します。
初期値: $('.selector').sortable({forceHelperSize: true });
取得: varforceHelperSize = $('.selector').sortable('option', 'forceHelperSize'); 🎜>Settings: $('.selector').sortable('option', 'forceHelperSize', true);

forcePlaceholderSize : Boolean : false
true の場合、プレースホルダーにサイズを強制します。
初期値: $('.selector').sortable({forcePlaceholderSize: true });
取得: varforcePlaceholderSize = $('.selector').sortable('option', 'forcePlaceholderSize'); 🎜>設定: $('.selector').sortable('option', 'forcePlaceholderSize', true);

grid : Array : false
並べ替えられたオブジェクトの item 要素をグリッドとして扱います. 、各移動は 1 つのグリッド サイズで移動します。配列値: [x, y]
Initial: $('.selector').sortable({ Grid: [50, 20] });グリッド = $('.selector').sortable('option', 'grid');
設定: $('.selector').sortable('option', 'grid', [50, 20] ) ;

ハンドル : セレクター、要素 : false
並べ替えアクションを item 要素内の特定の要素でのみ開始するように制限します。
初期値: $('.selector').sortable({ handle: 'h2' });
取得: var handle = $('.selector').sortable('option', 'handle') ;
設定: $('.selector').sortable('option', 'handle', 'h2');

helper : String, Function : 'original'
設定かどうか要素をドラッグすると、補助要素が表示されます。オプションの値: 'original'、'clone'
初期値: $('.selector').sortable({ helper: 'clone' });
Get: var helper = $('.selector') 。 sortable('option', 'helper');
設定: $('.selector').sortable('option', 'helper', 'clone');

項目: セレクター: ' > *'
並べ替えオブジェクト内のどの要素をドラッグして並べ替えできるかを指定します。
初期値: $('.selector').sortable({ items: 'li' });
取得: var items = $('.selector').sortable('option', 'items') ;
Settings: $('.selector').sortable('option', 'items', 'li');

opacity : Float : false
並べ替え時の補助要素を定義します (ヘルパー) 透明度を表示します。
初期値: $('.selector').sortable({ opacity: 0.6 });
取得: var opacity = $('.selector').sortable('option', 'opacity'); 🎜>Settings: $('.selector').sortable('option', 'opacity', 0.6);

placeholderType: StringDefault: false
並べ替えアクションが発生するときに空白のプレースホルダーを設定します CSS スタイル。
初期値: $('.selector').sortable({ placeholder: 'ui-state-highlight' });
取得: var placeholder = $('.selector').sortable('option', 'placeholder');
設定: $('.selector').sortable('option', 'placeholder', 'ui-state-highlight');

revert : ブール値 : false
true に設定すると、ドラッグされた要素が新しい位置に戻るときにアニメーション効果が発生します。
初期値: $('.selector').sortable({ revert: true });
取得: var revert = $('.selector').sortable('option', 'revert'); 🎜>設定: $('.selector').sortable('option', 'revert', true);

scroll : Boolean : true
true に設定すると、要素がそこにドラッグされますページの端に到達すると自動的にスクロールします。
初期値: $('.selector').sortable({ スクロール: false });
取得: varscroll = $('.selector').sortable('option', 'scroll'); 🎜>Settings: $('.selector').sortable('option', 'scroll', false);

scrollSensitivity : Integer : 20
要素が端に移動するピクセル数を設定します。ページのスクロールを開始します。
初期値: $('.selector').sortable({scrollSensitivity: 40 });
取得: varscrollSensitivity = $('.selector').sortable('option', 'scrollSensitivity'); 🎜>設定: $('.selector').sortable('option', 'scrollSensitivity', 40);

scrollSpeed : Integer : 20
ページのスクロール速度を設定します。
初期値: $('.selector').sortable({scrollSpeed: 40 });
取得: varscrollSpeed = $('.selector').sortable('option', 'scrollSpeed') ;
Settings: $('.selector').sortable('option', 'scrollSpeed', 40);

tolerance : String : 'intersect'
ドラッグされた要素がどの程度を超えるかを設定します他の要素の要素は並べ替えられます。オプションの値: 'intersect'、'pointer'
intersect: 少なくとも 50% 重複
pointer: マウス ポインターが要素と重複
初期値: $('.selector').sortable({許容範囲: 'pointer' });
取得: var許容値 = $('.selector').sortable('option', 'tolerance');
設定: $('.selector').sortable('option', '許容値', 'ポインタ');

zIndex : Integer : 1000
並べ替えアクションが発生するときの要素の Z インデックス値を設定します。
初期値: $('.selector').sortable({ zIndex: 5 });
取得: var zIndex = $('.selector').sortable('option', 'zIndex'); 🎜>設定: $('.selector').sortable('option', 'zIndex', 5);


・イベント

開始時
このイベントは次のときにトリガーされます。
定義: $('.selector').sortable({ start: function(event, ui) { ... } });
バインディング: $('.selector').bind('sortstart ' , function(event, ui) { ... });

sort
このイベントは、要素が並べ替えられるときにトリガーされます。
定義: $('.selector').sortable({ sort: function(event, ui) { ... } });
バインディング: $('.selector').bind('sort ' , function(event, ui) { ... });

change
このイベントは、要素が並べ替えられ、座標が変更されたときにトリガーされます。
定義: $('.selector').sortable({change: function(event, ui) { ... } });
バインディング: $('.selector').bind('sortchange ' , function(event, ui) { ... });

beforeStop
このイベントは、並べ替えアクションが終了する前にトリガーされます。現時点では、プレースホルダー要素とヘルパー要素はまだ有効です。
定義: $('.selector').sortable({ beforeStop: function(event, ui) { ... } });
バインディング: $('.selector').bind('sortbeforeStop ' , function(event, ui) { ... });

stop
このイベントは、並べ替えアクションが終了するとトリガーされます。
定義: $('.selector').sortable({ stop: function(event, ui) { ... } });
バインディング: $('.selector').bind('sortstop ' , function(event, ui) { ... });

update
このイベントは、並べ替えアクションが終了し、要素の座標が変更されたときにトリガーされます。
定義: $('.selector').sortable({ update: function(event, ui) { ... } });
バインディング: $('.selector').bind('sortupdate ' , function(event, ui) { ... });

receive
このイベントは、接続された並べ替え可能オブジェクトが別の並べ替え可能オブジェクトから要素を受け取るとトリガーされます。
定義: $('.selector').sortable({ accept: function(event, ui) { ... } });
バインディング: $('.selector').bind('sortreceive ' , function(event, ui) { ... });

over
このイベントは、要素がドラッグされて別の並べ替え可能なオブジェクトに移動されるとトリガーされます。
定義: $('.selector').sortable({ over: function(event, ui) { ... } });
バインディング: $('.selector').bind('sortover ' , function(event, ui) { ... });

out
このイベントは、要素が並べ替え可能なオブジェクトから別の並べ替え可能なオブジェクトにドラッグされるとトリガーされます。
定義: $('.selector').sortable({ out: function(event, ui) { ... } });
バインディング: $('.selector').bind('sortout ' , function(event, ui) { ... });

activate
接続を持つソート可能オブジェクトがソート アクションを開始すると、許可されているすべてのソート可能オブジェクトがこのイベントをトリガーします。
定義: $('.selector').sortable({ activate: function(event, ui) { ... } });
バインディング: $('.selector').bind('sortactivate ' , function(event, ui) { ... });

deactivate
接続された並べ替え可能オブジェクトが並べ替えアクションを終了すると、許可されているすべての並べ替え可能オブジェクトがこのイベントをトリガーします。
定義: $('.selector').sortable({ deactivate: function(event, ui) { ... } });
バインディング: $('.selector').bind('sortdeactivate ' , function(event, ui) { ... });


・メソッド
destory
要素からドラッグ機能を削除します。
使用法: .sortable( 'destroy' )

disable
要素のドラッグ機能を無効にします。
使用法: .sortable( 'disable' )

enable
要素のドラッグ機能を有効にします。
使用法: .sortable( 'enable' )

option
要素のパラメータを取得または設定します。
使用法: .sortable( 'option' , optionName , [value] )

serialize
シリアル化後の各 item 要素の id 属性を取得または設定します。
使用法: .sortable( 'serialize' , [options] )

toArray
シリアル化後の各 item 要素の id 属性の配列を取得します。
使用法: .sortable( 'toArray' )

refresh
現在の並べ替え可能なオブジェクトの項目要素の並べ替えを手動で更新します。
使用法: .sortable( 'refresh' )

refreshPositions
現在の並べ替え可能なオブジェクトの item 要素の座標を手動で更新します。このメソッドはパフォーマンスを低下させる可能性があります。
使用法: .sortable( 'refreshPositions' )

cancel
現在の並べ替え可能オブジェクト内の項目要素の並べ替えの変更をキャンセルします。
使用法: .sortable( 'cancel' )


ソート後に保存するには 2 つの方法があり、1 つは Cookie で、もう 1 つはデータベース設定ファイルなどです。

以下はデータベースのコードの一部です:

コードをコピー コードは次のとおりです。以下:

$(function() {
var show = $(".loader");
var orderlist = $(".orderlist");
var listleft = $("div [id = 'column_left']");
var listcenter = $("div[id = 'column_center']");
var listright = $("div[id = 'column_right']");
$( ".column" ).sortable({
opacity: 0.5,//透明度をドラッグ
revert: true, //バッファリング効果
cursor: 'move', // マウス スタイルをドラッグ
connectWith: ".column",
//update の使用を開始し、結果を 2 回実行します。これはリソースの無駄です。次に stop に変更します。
//ただし、要素の場合も stop が機能します。位置は変更されていません。
//update を使用すると他の JS で問題が発生します。^_^
stop: function(){
var new_order_left = [];列レイアウト
var new_order_center = [] ;//中央列レイアウト
var new_order_right = [];//右列レイアウト
listleft.children(".portlet").each(function() {
new_order_left.push(this.title) ;
});
listcenter.children(".portlet").each(function() {
new_order_center.push(this.title);
});
listright.children (".portlet").each(function() {
new_order_right.push(this.title);
});
var newleftid = new_order_left.join (',');
var newcenterid = new_order_center.join(',');
$.ajax({
タイプ: " post",
url: jsonUrl, //サーバー側ハンドラー
data: { leftid: newleftid, centerid: newcenterid, rightid:newrightid}, //id: 新しい配置に対応する ID、order: 元の配置order
// beforeSend: function( ) {
// show.html("Updating");
// },
success: function(msg) {
//alert( msg);
show.html ("")
}
});