DataTables＆Droppable命中區偏離中心

我試圖結合DataTables和JQuery UI Droppable。DataTables＆Droppable命中區偏離中心

當我拖過dataTable時，我想要一個覆蓋層重疊表格的區域。實際上這很好。我有一個#table，這兩個dataTables和JQuery UI參考他們各自的代碼。

但是，拖動事件（over，drop）只能觸發表的一半。（左側）

Here is my live example.確保將其中一個列表項目拖到表格上。

我使用Chrome 27

我有一個雙顯示器設置，如果我拖到我的其他顯示器用這個例子（假設它是全屏幕）拖動事件實際上將外線開火了左邊的窗戶。

這裏是一個可視化例子：

enter image description here

我想知道這可能是導致此？當我用我的控制檯檢查桌子時，它顯示它應該在哪裏，桌子上沒有任何中途重疊。

這是DataTables和Droppable不能正常工作的副作用嗎？我無法弄清楚。也許這只是一個CSS問題？

我試着搞亂JQuery UI定位和調查控制檯，但我沒有任何成功。我的懷疑是它與可丟棄有關，它沒有得到正確的位置（儘管位置確實沒錯，就像你可以直觀地看到的那樣）。

有沒有人有任何想法？

來源

2013-07-08 Johannes

看起來問題是由droppable's tolerance option造成的;其默認值是intersect。

如在API文檔

intersect指出：可拖動的在兩個方向重疊可投放至少50％。

鑑於你<li> S如何仍處於默認的風格，他們將填補他們的父母<ul>的可用寬度，如果你嘗試拖動他們在桌子的右邊<li>超過50％掛在可丟棄物之外。

通過爲您的<li> s和#myListOfData添加一些邊界，您可以更好地瞭解發生了什麼。

Figure 1

所以現在我們知道是什麼問題，到解決方案。

可以作爲Pepper說只是改變可投放的耐受性選項指針：

Working Example 1

$('#table').droppable({ 
     tolerance: 'pointer', //Important Bit 
     over: function (event, ui) { 
      $('#tableOverlay').width($(this).width()); 
      $('#tableOverlay').height($(this).height()); 

      $('#tableOverlay').show(); 
      $("#tableOverlay").position({ 
       of: this, 
       at: "top left", 
       my: "top left" 
      }); 
     }, 
     out: function (event, ui) { 
      $('#tableOverlay').hide(); 
     }, 
     drop: function (event, ui) { 
      $('#tableOverlay').hide(); 
     } 
    });

或者你可以使用tolerance option: 'touch'像這樣：

Working Example 2

$('#table').droppable({ 
     tolerance: 'touch', //Important Bit 
     over: function (event, ui) { 
      $('#tableOverlay').width($(this).width()); 
      $('#tableOverlay').height($(this).height()); 

      $('#tableOverlay').show(); 
      $("#tableOverlay").position({ 
       of: this, 
       at: "top left", 
       my: "top left" 
      }); 
     }, 
     out: function (event, ui) { 
      $('#tableOverlay').hide(); 
     }, 
     drop: function (event, ui) { 
      $('#tableOverlay').hide(); 
     } 
    });

或者你可以像這樣指定一個寬度爲您<li> S：

Working Example 3

#myListOfData li { 
    width: 100px; 
}

或者，如果你寧願不改變公差選項或指定的寬度，你可以使用
display: table;像這樣：

Working Example 4

#myListOfData li { 
    display: table; 
}

來源

2013-08-24 17:17:11 apaul

感謝您的難以置信的答案！希望胡椒獎給你賞金，你肯定值得這個詳細的答案:) – Johannes

添加tolerance: "pointer"使其按預期工作。

來源

2013-08-24 00:44:02 Pepper

DataTables＆Droppable命中區偏離中心

回答

相關問題