Question

我已将多个div设置为“droppable”，并将其他一些div（放置在droppable 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函数来检测draggable被放入的元素是否与拖动开始时的元素相同？换句话说，如何检测拖动是否在同一个droppable 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');
    }
  });

BTW，它只在IE9和Chrome上测试，有时FF有不同的方法来检索事件参数。

修改

这是解释我上次评论http://jsfiddle.net/Bouillou/QvRjL/100/的小提琴 http://jsfiddle.net/Bouillou/QvRjL/100/

jQuery UI Draggable：忽略在相同/初始位置删除的拖动

1 个答案: