Arrastre y suelte varias filas de la tabla html usando Jquery

Estoy intentando arrastrar y soltar varias filas de una tabla a otra. Por favor, ayúdame cómo puedo lograr esto. A continuación encontrará el enlace de violín (que tomé de nuestro foro),

$(document).ready(function () { var $tabs = $('#table-draggable2') $("tbody.connectedSortable") .sortable({ connectWith: ".connectedSortable", items: "> tr:not(:first)", appendTo: $tabs, helper: "clone", zIndex: 999990 }) .disableSelection(); var $tab_items = $(".nav-tabs > li", $tabs).droppable({ accept: ".connectedSortable tr", hoverClass: "ui-state-hover", drop: function (event, ui) { return false; } }); }); 

http://jsfiddle.net/balajipalamadai/t06m8ghb/

gracias, Balaji

Lo encontré yo mismo, solo modifiqué el html de este fiddle http://jsfiddle.net/yf47u/ para hacerlo funcionar. Me referí a esta publicación

Por favor, encuentre el siguiente enlace de trabajo de violín para el mismo,

http://jsfiddle.net/balajipalamadai/83k9k/47/

 
1 Student 1
2 Student 2
3 Student 3
4 Student 4
5 Student 5
6 Student 6
7 Student 7
8 Student 8
9 Student 9
10 Student 10

gracias, Balaji

  
Id First Name Last Name
1 Name A Name AA
2 Name B Name BB
3 Name C Name CC
4 Name D Name DD
5 Name E Name EE
6 Name F Name FF
7 Name G Name GG
8 Name H Name HH
Id First Name Last Name
11 Name A1 Name AA1

Available Boxes (click to select multiple boxes)

  • I have a Pen for Box #1
  • I have a Copy For Box #2
  • I have a Bag for Box #3
  • I have a Office for Box #4

My Boxes

 $(document).ready(function() { function touchHandler(event) { var touch = event.changedTouches[0]; var simulatedEvent = document.createEvent("MouseEvent"); simulatedEvent.initMouseEvent({ touchstart: "mousedown", touchmove: "mousemove", touchend: "mouseup" }[event.type], true, true, window, 1, touch.screenX, touch.screenY, touch.clientX, touch.clientY, false, false, false, false, 0, null); touch.target.dispatchEvent(simulatedEvent); event.preventDefault(); } function init() { document.addEventListener("touchstart", touchHandler, true); document.addEventListener("touchmove", touchHandler, true); document.addEventListener("touchend", touchHandler, true); document.addEventListener("touchcancel", touchHandler, true); } init(); var bindDrag_drap = function(item1, item2) { $(item1, item2).droppable({ drop: function(event, ui) { $(this).append(ui.helper.children()); $('.' + selectedClass).remove(); } }); //$(item1, item2).sortable().droppable({ // drop: function (e, ui) { // $('.' + selectedClass).appendTo($(this)).add(ui.draggable) // ui.draggable is appended by the script, so add it after // .removeClass(selectedClass).css({ // top: 0, // left: 0 // }); // } //}); }; var bindDragMouseEvent = function(item) { $(item) // Script to deferentiate a click from a mousedown for drag event .bind('mousedown mouseup', function(e) { if(e.type == "mousedown") { lastClick = e.timeStamp; // get mousedown time } else { diffClick = e.timeStamp - lastClick; if(diffClick < clickDelay) { // add selected class to group draggable objects $(this).toggleClass(selectedClass); // $(this).toggleClass("selectedRow"); var el = $(this)[0].firstElementChild; el.checked = $(this)[0].className.indexOf('ui-state-highlight') != -1 ? true : false; } } }); }; var bindDropEvent = function(item, contaier) { $(item).draggable({ revertDuration: 10, // grouped items animate separately, so leave this number low containment: contaier, start: function(e, ui) { ui.helper.addClass(selectedClass); }, stop: function(e, ui) { // reset group positions $('.' + selectedClass).css({ top: 0, left: 0 }); }, helper: function() { var selected = $('.' + selectedClass); if(selected.length === 0) { selected = $(this).addClass(selectedClass); } var container = $('
').attr('id', 'draggingContainer'); container.append(selected.clone().removeClass(selectedClass)); return container; }, drag: function(e, ui) { // set selected group position to main dragged object $('.' + selectedClass).css({ top: ui.position.top, left: ui.position.left }); } }); }; var selectedClass = 'ui-state-highlight', clickDelay = 600, // click time (milliseconds) lastClick, diffClick; // timestamps bindDragMouseEvent('#draggable1 li'); bindDropEvent("#draggable1 li", '.demo1'); bindDrag_drap("#droppable1, #draggable1"); bindDragMouseEvent('#draggable tr'); bindDropEvent("#draggable tr", '.demoTR'); bindDrag_drap("#droppable, #draggable"); });

Aquí está el código de muestra para seleccionar múltiples filas para arrastrar y soltar

Jquery se utiliza para implementar este script y también jquery datatable principalmente jquery.dataTables.min.js y jquery-ui.min.js.

Todo el artículo con demostración se puede encontrar desde aquí. Arrastre y suelte varias filas usando jquery en la tabla html

.

Esto también muestra el uso de paginación y búsqueda incorporadas, espero que esto ayude

       
ID Name
1Andy
2Mike
3Lance
4Henry
5Steve
6Mark