JqueryUI，将元素拖入包含大表的滚动droppable div的单元格

Question

我正面临拖/放问题。

我希望总能看到正在拖动的元素，并且我希望能够滚动特定的div来删除表格中任何单元格中的元素。我也希望能够将元素从任何div拖到任何div。

这个例子工作得很好。我的最后一个问题是关于单元格hoverClass属性：当我从“容器B”边界附近的“容器A”中拖出一个元素时，我实现了自动滚动行为以在我的表中导航以到达任何单元格。但是，在滚动模拟之后，hoverClass不适用于正确的单元格。但是，该元素始终放入正确的单元格中。

https://jsfiddle.net/Bouillou/QvRjL/434/

我的方法是否正确？

编辑

我找到了一个解决方法。这个想法是在助手构造回调期间将元素克隆追加到可滚动容器，然后在1ms后使用setTimeout函数将辅助器附加到主体。帮助器位置必须映射到鼠标位置以避免偏移问题。

这是我最终的解决方案：https://jsfiddle.net/Bouillou/QvRjL/434/

我相信这是可能的发展做一个最好的办法。

Answer 1

显然我的更新是唯一的解决方案。

它现在几个月没有问题地工作。

我找到了解决方法。这个想法是将元素克隆追加到辅助构造回调的可滚动容器中，然后在1ms后使用setTimeout函数将辅助方法附加到主体。帮助器位置必须映射到鼠标位置以避免偏移问题。

这里是我的解决方案：http://jsfiddle.net/QvRjL/134/

$('[id^="drag-"]').each(function() { 
    $(this).draggable({ 
     opacity: 0.7, 
     cursorAt: { top: 15, left: 50 }, 
     appendTo: 'body', 
     containment: 'body',   
     scroll: true, 
     helper: function(){ 
      //Hack to append the cartridge to the body (visible above others divs), 
      //but still bellonging to the scrollable container 
      $('#container').append('<div id="clone" class="cartridge">' + $(this).html() + '</div>'); 
      $("#clone").hide(); 
      setTimeout(function(){ 
       $('#clone').appendTo('body'); 
       $("#clone").show(); 
      },1); 
      return $("#clone"); 
     }  
    }); 
});​ 

Answer 2

如果我正确地已了解，您滚动之后，highlitedcells是不正确的..

在我看来，它calcualtes细胞从容器元素突出，但随后复制表元素内德的地位。

Bascily，它检查鼠标从'container2'的偏移量，然后在偏移处但是从表't'位置高亮单元格。

抓住机会，用位置代替偏移。和上http://api.jquery.com/offset/提到的，

的.offset（）方法允许我们以检索 元件相对于所述文件的的当前位置。将其与.position（）， 进行比较，它检索相对于偏移父级的当前位置。

Personnaly我会简单地将一个css类应用到单元格并使用css：hover。 /编辑：如果你需要这样做的唯一原因是突出显示单元格..也许你也想触发一些其他的东西。