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

回答

相關問題