[jQuery UI] 基本メモ: Draggable – 端くれプログラマの備忘録

サンプルコード

<div id="box" style="width:100px; height:100px; background:green;"></div>

1	<div id="box" style="width:100px; height:100px; background:green;"></div>

$('#box').draggable();

1	$('#box').draggable();

オプションを追加してみる。

<div id="box" style="width:100px; height:100px; background:green;">
　　　　<div class="handle">Drag Here</div>
　　　　<div class="cancel">Not Here</div>
</div>

</div>

$('#box').draggable({
　　　　axis: 'x', //ドラッグ方向を限定
　　　　opacity: 0.5, //ドラック中は半透明
　　　　handle: '.handle', //ドラッグ可能な場所
　　　　cancel: '.cancel', //ドラッグ不可能な場所
　　　　drag: function(event, ui) { //イベント
　　　　　　　　console.log(ui.position);
　　　　}
});

$('#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/

サンプルコード

参考サイト

関連記事