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 回答