Javascript动态表，droppable触发两次答案

【问题标题】：Javascript dynamic table, droppable fires twiceJavascript动态表，droppable触发两次
【发布时间】：2013-09-02 10:54:11
【问题描述】：

我通过 JS 制作了一个表格，在一个单元格内有可放置的 div。如果我将一个元素放入其中，则 tge drop 函数会触发两次。（见控制台）。我想这与 for 循环有关...

Jsbin：http://jsbin.com/OMIbOGU/50/edit

$("document").ready(function(){

  function init(){
    var table = $("<table></table>");
    $("body").append(table);
    for(var i=0 ;i < 9; i++){
      var row = $("<tr></tr>");
      var cell =  $("<td></td>");
      for(var j = 0;j<2;j++){
        var slot = $("<div></div>").addClass('slot');

        slot.droppable({
          accept: ".unassigned",
          tolerance: "touch",
          drop:function(){
            console.log("dropped");
          }
        });

        if (j!==1)
          slot.addClass("dotted");
        cell.append(slot);
      }
      row.append(cell);    
      table.append(row);

    }

    $(".unassigned").draggable({
      revert: "invalid",
      snap: "td div"
    });
  }

  for(var k = 0 ; k<4;k++)
    init();
});

【问题讨论】：

控制台在哪里..？

标签： javascript jquery-ui jquery-ui-droppable

【解决方案1】：

通常，使用 greedy:true 初始化 droppable 函数可以解决问题。但不幸的是，它也对我不起作用。所以我使用了回调函数 drop 中传递的参数和该参数中的全局事件编号。

$("document").ready(function(){
  guid=0;
  function init(){
    var table = $("<table></table>");
    $("body").append(table);
    for(var i=0 ;i < 9; i++){
      var row = $("<tr></tr>");
      var cell =  $("<td></td>");
      for(var j = 0;j<2;j++){
        var slot = $("<div></div>").addClass('slot');

        slot.droppable({
          accept: ".unassigned",
          tolerance: "touch",
          drop:function(lev,lui){
            if(guid != lev.handleObj.guid)
              {
                console.log("dropped");
                guid = lev.handleObj.guid;
              }
          }
        });

        if (j!==1)
          slot.addClass("dotted");
        cell.append(slot);
      }
      row.append(cell);    
      table.append(row);

    }

    $(".unassigned").draggable({
      revert: "invalid",
      snap: "td div"
    });
  }

  for(var k = 0 ; k<4;k++)
    init();
});

所以我希望它很好......

【讨论】：

【解决方案2】：

看起来是由公差引起的：“触摸”，试试这个

Javascript

slot.droppable({
    accept: ".unassigned",
    tolerance: "pointer",//changed "touch" -> "pointer"
    drop:function(){
        console.log("dropped");
    }
});

或在放置目标 div 之间添加更多空间，以免“触摸”邻居

【讨论】：