jQuery UI のドラッグ可能なパラメータ collection_jquery

ドラッグ可能な
ライブラリ ファイル: ui/ui.core.js、ui/ui.draggable.js
========================= = ===================================
デフォルト:
$(”#draggable” ) .draggable();
======================================= === ==================
移動の制限 (移動範囲を制限):
$("#draggable").draggable({ axis: ' y' } ); //y 軸を制限します
$(”#draggable2″).draggable({ axis: 'x' }); //x 軸を制限します
$(”#draggable3″ ).draggable({ containment: '#containment-wrapper',scroll: false }); //スクロールバーは表示されません
$("#draggable4″).draggable({ containment: '#demo-frame' }) ;
$(" #draggable5″).draggable({ containment: 'parent' }); //親フレームに限定
================ ======= ====================================
遅延開始 (遅延移動):
$(”#draggable”).draggable({ distance: 20 }); //20 ピクセル移動してドラッグを開始
$(”#draggable2″).draggable({ 遅延: 1000 } ); //遅延 1 数秒後にドラッグを開始
=================================== ======= ==================
スナップ先 (スナップ先):
$(”#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] }); ====================== =========================
スクロール：
$(”#draggable”).draggable({ スクロール: true });
$(”#draggable2″).draggable({ スクロール: true, スクロール感度: 100 });感度
$(”#draggable3″).draggable({ スクロール: true,scrollSpeed: 100 }); //スクロール速度
================ ======================== =====================
位置を戻す(元の位置に復元):
$("#draggable").draggable({ revert: true }); //revert:true は位置に復元するように設定されます
$(”#draggable2″).draggable( { revert: true, helper: 'clone' }); //helper:'clone' コピードラッグ
======================== ========================= ============
ビジュアルフィードバック (視覚効果):
$ ("#draggable").draggable({ helper: 'original' }); // 設定はコピーされません（初期化設定）
$("#draggable2").draggable({ opacity: 0.7, helper: 'clone ' }); //不透明度は透明度を設定し、要素のクローンを作成します
$("#draggable3").draggable( {
cursor: 'move', //マウスのグラフィックを設定します
cursorAt: { top: -12, left: -20 }, //位置と位置座標を設定します
helper: function(event) {
return $('
私はカスタムヘルパーです
'); 🎜>} //新しいプロンプト要素を作成し、そのマウスの位置の値を
} より上に設定します。
$(" #set div”).draggable({ stack: { group: '#set div', min: -1 } });//グループ設定がドラッグされ、最後に追加された要素がグループの上に重ねられます。願いを込めたボード効果を作成するのに適しています。
=========================================== === =============
ドラッグハンドル(ドラッグポイント設定):
$("#draggable").draggable({ handle: 'p' }); /handle ドラッグ位置を設定します
$(”#draggable2″).draggable({ cancel: “p.ui-widget-header” }); //キャンセルはドラッグ位置を設定します
====== ================================================= ====
カーソル スタイル (マウス スタイル):
$("#draggable").draggable({ カーソル: { カーソル: '移動', 上: 56, 左: 56 } });カーソルはマウスのスタイルを設定し、上、左、右、下はマウスを基準とした要素の位置決めポイントを設定します
$("#draggable2").draggable({ カーソルAt: { カーソル: 'crosshair', top : -5、左: - 5 } });
$(”#draggable3″).draggable({ カーソル位置: { 下: 0 } });
========== ======= =========================================
カーソル スタイル (マウス スタイル) ：
$(”#draggable”).draggable({cursorAt: {cursor: 'move', top: 56, left: 56 } }); //カーソルはマウスのスタイルを設定します。上、左、右、下の設定 マウスを基準とした要素の位置決めポイント
============================= ================= ===================
ドラッグ可能、並べ替え可能:
$("#sortable ").sortable({
revert: true
}) ;
$("#draggable").draggable({
connectToSortable: '#sortable', //他のものに追加するドラッグを設定しますリスト
helper: 'clone'、
revert: '無効'
});