サンプル
いくつかのパターンを試してみます。ドラッグオプションの指定は、前ページでみたように、 cursorやaxisなど引数オブジェクトのプロパティで指定します。他にも、いくつかのプロパティがありますので、最新のものはOptionsや UI/Draggablesあるいは、 デモ などでご参照ください。(このページの実際のコードには、AllaboutサイトのCSSへの微調整が含まれていますので、CSS変更時には多少ずれる可能性があります。)
$('#myDrag1').draggable({containment:'parent'});
//指定したコンテナ内でドラッグできます
//指定したコンテナ内でドラッグできます
$('#myDrag2').draggable({axis:'x'})
//水平方向へドラッグできます
//水平方向へドラッグできます
$('#myDrag3').draggable({axis:'y'})
//垂直方向へドラッグできます
//垂直方向へドラッグできます
$('#myDrag8').draggable({opacity:0.5})
//ドラッグ中に透明化
//ドラッグ中に透明化
$('#myDrag4').draggable({cursor:'move'})
//ドラッグ中のカーソル形状
//ドラッグ中のカーソル形状
$('#myDrag5').draggable({cursorAt:'top'})
//ドラッグ中のカーソル位置
{top, left, bottom, right}
//ドラッグ中のカーソル位置
{top, left, bottom, right}
$('#myDrag6').draggable({stop:function(){
alert('終了')
}});//ドラッグ終了時のイベント
alert('終了')
}});//ドラッグ終了時のイベント
$('#myDrag7').draggable({grid:[50,50]})
//ドラッグ時の移動量xyグリッド
//ドラッグ時の移動量xyグリッド
