使用Jquery从html表中拖放多行 [英] Drag and Drop multiple rows from html table using Jquery

问题描述

我正在尝试将多个行从一个表拖放到另一个表。请帮助我如何实现这一目标。请找到以下小提琴链接（我从我们的论坛中获取），

I am trying to drag and drop multiple rows from one table to another. Please help me how I can achieve this. Please find below fiddle link (which I took from our forum),

$(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/

谢谢，
Balaji

thanks, Balaji

推荐答案

我自己找到了，我只修改了这个小提琴的 http://jsfiddle.net/yf47u/ 让它发挥作用。
我参考了这个 post

I found it myself, I just modified this fiddle's html http://jsfiddle.net/yf47u/ for making it to work. I reffered this post

请找到以下工作小提琴链接，

Please find the below working fiddle link for the same,

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

<div id="table1" class="bitacoratable">
   <table id="table1" class="childgrid">
      <tr class="draggable_tr">
         <td>1</td>
         <td>Student 1</td>
      </tr>
      <tr class="draggable_tr">
         <td>2</td>
         <td>Student 2</td>
      </tr>
      <tr class="draggable_tr">
         <td>3</td>
         <td>Student 3</td>
      </tr>
      <tr class="draggable_tr">
         <td>4</td>
         <td>Student 4</td>
      </tr>
      <tr class="draggable_tr">
         <td>5</td>
         <td>Student 5</td>
      </tr>
   </table>
</div>
<div id="table2" class="bitacoratable">
   <table id="table2" class="childgrid">
      <tr class="draggable_tr">
         <td>6</td>
         <td>Student 6</td>
      </tr>
      <tr class="draggable_tr">
         <td>7</td>
         <td>Student 7</td>
      </tr>
      <tr class="draggable_tr">
         <td>8</td>
         <td>Student 8</td>
      </tr>
      <tr class="draggable_tr">
         <td>9</td>
         <td>Student 9</td>
      </tr>
      <tr class="draggable_tr">
         <td>10</td>
         <td>Student 10</td>
      </tr>
   </table>
</div>

谢谢，
Balaji

thanks, Balaji

这篇关于使用Jquery从html表中拖放多行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！