サンプルコード
|
1 |
<div id="box" style="width:100px; height:100px; background:green;"></div> |
|
1 |
$('#box').draggable(); |
オプションを追加してみる。
|
1 2 3 4 |
<div id="box" style="width:100px; height:100px; background:green;"> <div class="handle">Drag Here</div> <div class="cancel">Not Here</div> </div> |
|
1 2 3 4 5 6 7 8 9 |
$('#box').draggable({ axis: 'x', //ドラッグ方向を限定 opacity: 0.5, //ドラック中は半透明 handle: '.handle', //ドラッグ可能な場所 cancel: '.cancel', //ドラッグ不可能な場所 drag: function(event, ui) { //イベント console.log(ui.position); } }); |
参考サイト
Draggable | jQuery UI
https://jqueryui.com/draggable/