このサンプルは、jQueryのinterface()プラグインを利用してdiv要素をドラッグします。
「Drage me」は任意の方向にドラッグします。ドラッグ中は波線でオブジェクトを表示します。「Gogstly」はゴースト(幽霊)のように移動中のオブジェクトを表示します。「Revent」は移動後ものと場所に戻ります。「Move only vertically」と「Moved only horizontally」は垂直、水平方向にのみ移動できます。「Drag by handle」は、ハンドラを表示します。「Moved by grid」は50 x 50の領域内で移動できます。
「with cursorAt」はカーソルにある位置にポジショニングしてから移動します。
「Drag me inside my parent」は、親要素内で移動できます。
$('#drag1').Draggable({ snapDistance: 10, frameClass: 'frameClass' });
$('#drag2').Draggable({ ghosting: true, opacity: 0.5, fx: 300 });
$('#drag3').Draggable({ revert: true, fx: 100 });
$('#drag4').Draggable({ grid: [50, 50]});
$('#drag5').Draggable({ axis: 'vertically'});
$('#drag6').Draggable({ axis: 'horizontally' });
$('#drag7').Draggable({ handle: 'div' });
$('#insideParent').Draggable({
zIndex: 1000,
ghosting: false,
opacity: 0.7,
containment: 'parent'
});
$('#drag8').Draggable({ cursorAt: { top: -5, left: -5 }});