2

次のような HTML コードがあるとします。

<script>
  $("#draggable").draggable();

  $("#clickable").click(function() {
    alert('CLICK!');
  });
</script>

<div id="draggable">
    <div id="clickable">        
    </div>
</div>

ご覧のとおり、クリック可能な div はドラッグ可能な div にネストされています。クリック可能なdivをハンドルとして使用してドラッグ可能なdivをドラッグアンドドロップすると、それにバインドされたクリックイベントが発生します。それは望ましい動作ではありません。クリック可能をクリックしたときにのみクリックイベントを発生させたいのですが、どこにもドラッグする必要はありません。それは可能ですか？setTimeout (または同様のもの) が使用されているソリューションには興味がないことを追加したいと思います。ここに jsfiddleリンクがあります(注: 見やすくするために css が追加されています)。

手がかりをありがとう！

4

2 に答える 2

3

どうぞ：

function handleClick() {
    alert('click!');
};

$("#draggable").draggable({
    start: function () {
        $('#clickable').off('click');
    },
    stop: function () {
        setTimeout(function(){
            $('#clickable').on('click', handleClick);
        },1);
    }
});

$("#clickable").on('click', handleClick);

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

于 2013-01-23T18:29:31.213 に答える
2

次のように、ドラッグ可能なメソッドのコールバックを使用します。

HTML:

<div id="draggable">
    <div id="clickable">        
    </div>
</div>

JQuery:

var dragged = false;
$("#draggable").draggable({stop:function(ev,ui) { dragged = true;}});

$("#clickable").click(function() {
    if(!dragged)
        alert('CLICK!');
    dragged = false;
});

JSFiddle: http://jsfiddle.net/AJmTg/9/

幸運を！

于 2013-01-23T18:24:21.503 に答える