ホーム > drag (全1件)
  • jQuery UIのdraggableのドラッグ途中とドラッグ終了時の対応を行う

    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には移動位置は最初の位置からの相対位置が格納されている。