jQuery UI的拖放问题

我试图做一个拖动和使用Jquery UIjQuery 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('&nbsp;').droppable('disable'); 
     } 
    })

我的问题是：当我拖动itemA从表1表2.我似乎无法在表2上拖动itemA。我希望用户仍然可以拖动itemA，即使它在表2中。

我不确定这里出了什么问题。任何人都可以帮助我吗？非常感谢

来源

2013-08-02 FlyingCat

你能提供[jsfiddle]（http://jsfiddle.net）吗？ – Dom

http://jsfiddle.net/7Xd6n/3/谢谢你们。 – FlyingCat

简而言之，问题是您的可拖动对象被设置为对齐''元素。将''元素从一个表格拖动到另一个表格时，该''元素不再存在于原始表格中，因此将其拖回时无法捕捉到。 – Jeemusu

主要问题是由于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。

让我知道如果您有任何问题！

来源

2013-08-02 02:49:25 Dom

作品像魅力谢谢！ – FlyingCat

可拖动的问题是拖动的元素实际上并未在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来动过，那么您可能需要在拖动元素时克隆元素，隐藏原始元素，然后在删除元素时添加克隆的元素并删除原始元素。

来源

2013-08-02 02:34:02 Jeemusu

我喜欢你的答案，但我不能在这里添加div。 +1虽然。 – FlyingCat

jQuery UI的拖放问题

回答

相关问题