このサイトは、主にjQueryに関連する内容を淡々と書きとめたものです。
IDがitemの要素にdraggableを適用し、ドラッグ終了時に移動範囲が±100ピクセル以内なら元の位置に戻す。
$(document).ready( function () {
$( '#item' ).draggable( {
stop: function ( e, ui ) {
if ( Math.abs( ui.position.top ) <= 100 &&
Math.abs( ui.position.left ) <= 100 ) {
$(this).attr( 'style', 'position: relative;' );
}
}
} );
} );
attr関数で、style属性値に’position: relative;’をセットすると元の位置に戻る。
IDがitemの要素にdraggableを適用し、ドラッグ中とドラッグ終了イベントの処理を行う。
$(document).ready( function () {
$( '#item' ).draggable( {
drag: function ( e, ui ) {
if ( ui.position.left > 0 ) {
// 最初の位置よりも右側に移動した場合
}
},
stop: function ( e, ui ) {
if ( ui.position.top > 0 ) {
// 最初の位置よりも下側に移動した場合
}
}
} );
} );
drapプロパティにはドラッグ中に発生するイベントの関数を、stopプロパティにはドラッグ終了時に発生するイベントの関数を指定する。イベント関数が受け取るui.position.topとleftには移動位置は最初の位置からの相対位置が格納されている。
IDがitemの要素にdraggableを適用し、水平方向にのみドラッグできるようにする。
$(document).ready( function () {
$( '#item' ).draggable( { axis: 'x' } );
} );
axisプロパティはデフォルトでfalseになっており、初期化時に’x’を指定すると水平方向のみに移動可能になる。ちなみに’y’を指定すると垂直方向のみが移動可能になる。
IDがitemの要素にdraggableを適用し、ドラッグできるようにする。
$(document).ready( function () {
$( '#item' ).draggable();
} );
jQueryのほか、jQuery UI Core、jQuery UI Widget、UI Mouseが必要で、初期化時に適用したい任意の要素に対してdraggable関数を呼び出す。
