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。 /編輯：如果你需要這樣做的唯一原因是突出顯示單元格..也許你也想觸發一些其他的東西。