Sortable table and Draggable TR

我正在尝试做一些非常简单的事情。我正在尝试使用JQuery UI对表进行排序，并将Draggable拖到不同的div上，我将它用作垃圾桶。我有以下脚本。但由于某种原因拖动和排序冲突Sortable table and Draggable TR

$("#TBL_OUTPUT").sortable({ 
    items: 'tr:not(:first)' 
}); 

$("#TBL_OUTPUT tr").draggable({ 
    helper: "clone", 
    start: function(event, ui) { 
     c.tr = this; 
     c.helper = ui.helper; 
    } 
}); 

$("#TRASHCAN").droppable({ 
    hoverClass: "TRASH_Hover", 
    drop: function(event, ui) { 
     $(c.tr).remove(); 
     $(c.helper).remove(); 
    } 
});

有什么想法？

来源

2015-08-03 Amirul Islam

只需使用'connectWith'属性，只使用排序。你不需要拖动和拖放。 – boszlo

感谢boszlo，我试过你的建议，但connectWith不工作。元素TRASHCAN实际上是一个div ..所以我想知道这是否可能是原因？ –

没问题。 'Div's很好。我现在已经完全回答了你的问题。如果您满意，请接受/投票。 – boszlo

您可以简单地使用两个可排序 s。像：

$("table").sortable({ 
    items: 'tr:not(:first)', 
    connectWith: 'div.bin', 
    helper: 'clone', 
    start: function (e, ui) { 
     $('.bin').css("background-color", "red"); 
    }, 
    stop: function (e, ui) { 
     $('.bin').css("background-color", "green"); 
    } 
}); 

$('div.bin').sortable({ 
    connectWith: 'table', 
    update: function (e, ui) { 
     var content = ui.item.children('td').text(); 

     if (confirm('Delete item: ' + content + '?')) { 
      $('div.bin').empty(); 
      alert('Item ' + content + ' deleted!'); 
     } else { 
      alert(content + 'will stay in the bin and you can drag it back to table'); 
     } 
    } 
});

FIDDLE：https://jsfiddle.net/rte2by43/4/

如果你想保持可放开，这也将工作：

$("#TBL_OUTPUT").sortable({ 
    items: 'tr:not(:first)', 
    connectWith: '#TRASHCAN' 
}); 

$("#TRASHCAN").droppable({ 
    hoverClass: "TRASH_Hover", 
    drop: function(event, ui) { 
     alert($(ui.draggable).children('td').text()); 
    } 
});

来源

2015-08-03 15:41:43 boszlo

这是完美的..谢谢很多人.. –

Sortable table and Draggable TR

回答

相关问题