jQuery UI Draggable：忽略拖放到相同/初始位置的拖动

Question

我已经将一些 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 内开始和结束？（我的目标是忽略此类“非事件”。）

Answer 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/