javascript - jQueryでドラッグ後のクリックイベントを防ぐ

Question

<div>イベントがあり、ドラッグ用のclickイベントがないドラッグ可能なものがありますが、ドラッグした後、<div>クリック イベントが適用され<div>ます。

ドラッグ後のクリックイベントを防ぐにはどうすればよいですか?

$(function(){
    $('div').bind('click', function(){
        $(this).toggleClass('orange');
    });

    $('div').draggable();
});

http://jsfiddle.net/prince4prodigy/aG72R/

Answer 1

最初にドラッグ可能なイベントをアタッチし、次にクリック イベントをアタッチします。

$(function(){
    $('div').draggable();
    $('div').click(function(){
        $(this).toggleClass('orange');
    });
});

ここで試してみてください: http://jsfiddle.net/aG72R/55/

Answer 2

dataとで解決しましたsetTimeout。ヘルパークラスよりも良いかもしれません。

<div id="dragbox"></div>

と

$(function(){
    $('#dragbox').bind('click', function(){
        if($(this).data('dragging')) return;
        $(this).toggleClass('orange');
    });

    $('#dragbox').draggable({
        start: function(event, ui){
            $(this).data('dragging', true);
        },
        stop: function(event, ui){
            setTimeout(function(){
                $(event.target).data('dragging', false);
            }, 1);
        }
    });
});

フィドルを確認してください。

Answer 3

これはうまくいくはずです：

$(function(){

    $('div').draggable({
    start: function(event, ui) {
        $(this).addClass('noclick');
    }
});

$('div').click(function(event) {
    if ($(this).hasClass('noclick')) {
        $(this).removeClass('noclick');
    }
    else {
        $(this).toggleClass('orange');
    }
});
});

デモ

Answer 4

ドラッグ可能でjQuery UIのui-draggable-draggingクラスを確認するだけです。そこにある場合は、クリック イベントを続行しないでください。このクラスの設定と削除は jQuery UI が処理するため、ユーザーが行う必要はありません。:)

コード：

$(function(){
    $('div').bind('click', function(){
        if( $(this).hasClass('ui-draggable-dragging') ) { return false; }
        $(this).toggleClass('orange');
    });

    $('div').draggable();
});