0

多数の div を「ドロップ可能」に設定し、その他の div (ドロップ可能 div 内に配置) を「ドラッグ可能」に設定しました。

これが私のコードです：

<script>

function handleDrop (event, ui) {
   var myDiv = document.getElementById("messages");
   var theDrop = $(this);
   var theDrag = ui.draggable;
   myDiv.innerHTML = myDiv.innerHTML + "<br>Dropped [" + theDrag.text() + "] with id = [" +  theDrag.attr("id") + "] in [" + theDrop.attr("id") + "]";

}


  $(function() {

      $( ".item" ).draggable( { tolerance: "fit", revert: "invalid", revertDuration: 150 } );
      $( ".column" ).droppable({ drop: handleDrop });

  });

</script>

これは問題なく動作しますが、私の質問は、handleDrop 関数を変更して、ドラッグ可能な要素がドロップされた要素が、ドラッグが開始されたときの要素と同じであるかどうかを検出するにはどうすればよいですか? つまり、ドラッグが同じドロップ可能な div 内で開始および終了したかどうかを検出する方法は? (私の目標は、そのような「非イベント」を無視することです。)

4

1 に答える 1

1

次のコードを使用して、ソースとターゲットのドロップ可能なコンテナーを推測できます。

  $( ".column" ).droppable({ 
    drop: function(event, ui) {
        console.log(event.target.id);
        console.log(ui.draggable[0].parentElement.id);

        var target = event.target.id;
        var source = ui.draggable[0].parentElement.id;
        if(target === source)
            alert('Same droppable container');
    }
  });

ところで、これは IE9 と Chrome でのみテストされています。FF はイベント パラメータを取得する方法が異なる場合があります。

編集

ここに私の最後のコメントを説明するフィドルがありますhttp://jsfiddle.net/Bouillou/QvRjL/100/ http://jsfiddle.net/Bouillou/QvRjL/100/

于 2012-11-18T09:12:53.660 に答える