jQuery UI的拖放問題

Question

我試圖做一個拖動和使用Jquery UI

我需要拖動和兩個表之間的拖放功能下降。

table1 
<table class='table'> 
.... 
</table> 

table2 
<table class='table'> 
.... 
</table> 

我希望用戶從表1中拖動cell表2

下面的代碼實現這一

var dragging =null; 

    obj = $('.table td'); 

    $(obj).draggable({ 
     cursor:'pointer', 
     snap:$('td span'), 
     revert: 'invalid'  
    }) 

    $(obj).droppable({ 
     //only accept the drop if the cell is empty. 
     accept: function(e){ 
      return $(this).text().trim()==""; 
     }, 

     //replace anything items on table 2. 
     drop:function(event, ui){ 
      $(this).html(' ').droppable('disable'); 
     } 
    }) 

我的問題是：當我拖動itemA從表1表2.我似乎無法在表2上拖動itemA。我希望用戶仍然可以拖動itemA，即使它在表2中。

我不確定這裏出了什麼問題。任何人都可以幫助我嗎？非常感謝

Answer 1

主要問題是由於td可拖動和拖放造成的。當您拖動td並將其放在另一個td上時，則您將物理上將td移出表格，因此「拖放」點會更改。

另外我建議不要以這種方式使用accept。當您在accept函數內調用$(this)時，它將返回全部可拖動對象。由於您確實只關注td的內容，因此我建議以不同的方式處理此問題，請使用drop事件來驗證td是否爲空。

$(function() { 
var dragging =null; 

    obj = $('.table td'); 

    //use obj since $(obj) is already jQuery object 
    obj.draggable({ 
     cursor:'pointer', 
     snap:$('td span'), 
     revert: 'invalid', 
     helper: 'clone', 
     start: function(event, ui) { 
      //make helper same height as td 
      $(ui.helper).css('height', $(this).height()); 
     } 
    }) 

    obj.droppable({ 
     accept: obj, //make obj accept 
     drop:function(event, ui){ 
      var target = $(event.target), //can also use $(this) 
      drag = $(ui.draggable), 
      targetText = "", 
      dragText = "", 
      duration = 0; 

      if(target.text().trim() === ""){ 
       //store original target, drag text 
       targetText = target.text().trim(); 
       dragText = drag.text().trim(); 

       //change html for each element 
       target.html(dragText); 
       drag.html(targetText); 
      } 
      else{ 
       //if not empty, change duration 
       duration = 500; 
      } 

      //always have td revert 
      //however, if invalid, the revertDuration will be default 
      //so the element "reverts" 
      ui.draggable.draggable('option', 'revertDuration', duration); 
      ui.draggable.draggable('option','revert', true); 

     } 
    }) 
}); 

DEMO： http://jsfiddle.net/dirtyd77/7Xd6n/4/

通過這種方式這樣做，只有內容的變化和td S保持存儲在table。

讓我知道如果您有任何問題！

Answer 2

可拖動的問題是拖動的元素實際上並未在DOM中移動。所以當你試圖把它拖回原來的位置時，你試圖把它放在自己身上。

理想情況下，不要拖動<td>元素，而應將其中的內容包裝在<div>元素中，然後拖動它們。

調整後的代碼會是這樣的：

$(function() { 

    draggable_obj = $('.table td div'); 
    droppable_obj = $('.table td'); 

    $(draggable_obj).draggable({ 
     cursor:'pointer', 
     snap:'td', 
     revert: 'invalid' 
    }) 

    $(droppable_obj).droppable({ 
     drop:function(event, ui){} 
    }) 
}); 

這裏是一個小提琴它在行動：

http://jsfiddle.net/jjyNS/

如果你需要的元素在DOM來動過，那麼您可能需要在拖動元素時克隆元素，隱藏原始元素，然後在刪除元素時添加克隆的元素並刪除原始元素。