1

Jquery我正在尝试使用UI进行拖放

我需要两个表之间的拖放功能。

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

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

我希望用户cell从表 1 拖动到表 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 之后。我似乎无法itemA再在表 2 上拖动。我希望用户仍然能够拖动itemA，即使它在表 2 中。

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

4

2 回答 2

2

主要问题是由td可拖动和可放置引起的。当您将 atd拖放到另一个 上td时，您会物理地将atd移出表格，因此“放置”点会发生变化。

我也建议不要accept以这种方式使用。当您$(this)在accept函数中调用时，它会返回所有可拖动对象。由于您实际上只关心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);

       }
   })
});

演示：http: //jsfiddle.net/dirtyd77/7Xd6n/4/

通过这种方式，只有内容发生变化，而tds 保留在table.

如果您有任何问题，请告诉我！

于 2013-08-02T02:49:25.533 回答
1

draggable 的问题在于您拖动的元素实际上并没有在 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-02T02:34:02.453 回答