jquery - ドラッグ可能なプラグイン(jQuery)で移動オブジェクトの方向を取得するには?

Question

オブジェクト (div-box) があり、ドラッグ可能です (jQuery を使用しています)。訪問者が移動した方向の情報を取得するにはどうすればよいですか? 例: ユーザーがそれを左下にドラッグし、知りたいのですが、どうすればよいですか?

Answer 1

これはどう？

var start,stop;

$("#draggable2").draggable({
    axis: "x",
    start: function(event, ui) {
        start = ui.position.left;
    },
    stop: function(event, ui) {
        stop = ui.position.left;
        alert('has moved ' + ((start < stop) ? 'right':'left'))
    }
});​

クレイジーフィドル

Answer 2

元の位置は ui.helper オブジェクトに組み込まれています。

        $('#foo').draggable({
            stop: function(event, ui) {
                var dragged = ui.helper;
                var dragged_data = dragged.data('draggable');
                var direction = (dragged_data.originalPosition.left > dragged.position().left) ? 'left' : 'right';

                console.log(direction);
            }
        });

これは、開始、ドラッグ、または停止イベントのコールバックで行うことができます...

Answer 3

このページを見てください。ソースコードとデモは、この Web サイトで入手できます。

http://www.coursesweb.net/jquery/jquery-ui-draggable-drag