9

私は JQuery UI を使用して要素をドラッグ可能にし、コードで開始、ドラッグ、および終了時に何をするかを指定できます。

しかし、左にドラッグして別の関数を右にドラッグして実行するにはどうすればよいでしょうか?

ドラッグ可能な軸を既に x 軸のみに制限しています。したがって、要素は左または右にのみ移動できます。

4

3 に答える 3

14

このデモをチェックしてください：http://jsfiddle.net/3NtS9/

各アトミック ドラッグ操作で前のイベント座標と照合することで、これを行うことができます。

var prevX = -1;

$('div').draggable({
    drag: function(e) {
        //console.log(e.pageX);
        if(prevX == -1) {
            prevX = e.pageX;    
            return false;
        }
        // dragged left
        if(prevX > e.pageX) {
            console.log('dragged left');
        }
        else if(prevX < e.pageX) { // dragged right
            console.log('dragged right');
        }
        prevX = e.pageX;
    }
});
于 2013-04-30T06:25:29.327 に答える
9

これを行う簡単な方法は次のとおりです。

$( "#draggable" ).draggable({
    drag: function( event, ui ) {
        $(this).text(ui.originalPosition.left > ui.position.left ?  'left' : 'right');
    }
});

デモ: http://jsfiddle.net/GNHTW/

于 2013-04-30T06:33:17.140 に答える
0

startイベントとstopイベントを処理し、停止イベントで位置デルタを決定して、左または右に移動したかどうかを取得することをお勧めします。

http://jqueryui.com/draggable/#events

于 2013-04-30T06:26:25.377 に答える