我需要将一个表行数据拖放到另一个表中，但无法实现

Question

我正在开发拖放功能。我认为它部分完成，但我没有得到预期的结果。我的方案是将一个表格行拖到另一个表格。我可以将一行从当前表拖放到另一个表，但行数据没有放到我想要的位置。我需要将当前 Table 行数据拖放到 name 列下的另一个表中，但我没有成功。

$(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;
    }
  });

});

.add_remove {
  width: 100px;
}

#add_remove {
  padding-top: 60px;
  text-align: center;
}

<div class="page-content-wrapper">
  <div class="page-content">
    <h3 class="page-title">Route Details</h3>
    <div class="clearfix"></div>
    <div class="row">
      <div class="col-lg-4">
        <div class="form-group">
          <label class="control-label"> Route Name</label>
          <input type="text" name="route_name" id="route_name" class="form-control" value="" />
        </div>
      </div>
      <div class="col-lg-8"></div>
    </div>
    <div class="row">
      <div class="col-lg-2">
        <label class="control-label"> Day</label>
      </div>
      <div class="col-lg-2">
        <select class="form-control input-medium pull-right">
          <option value="">Select Day</option>
          <option value="">Saturday</option>
          <option value="">Sunday</option>
          <option value="">Monday</option>
          <option value="">Tuesday</option>
          <option value="">Wednesday</option>
          <option value="">Thursday</option>
          <option value="">Friday</option>
        </select>
      </div>
      <div class="col-lg-8"></div>
    </div>
    <div class="row">
      <div class="col-lg-4">
        <label class="control-label">Description</label><br>
        <textarea rows="4" cols="50" name="" class="form-control"></textarea>
      </div>
      <div class="col-lg-8"></div>
    </div>
    <br>
    <div class="row">
      <div class="col-lg-4">
        <div class="drag-row">
          <table class="table table-bordered table-hover" id="table-draggable1">
            <tbody class="connectedSortable">
              <tr>
                <td>
                  <input type="text" name="route_name" id="route_name" class="form-control" value="" placeholder="Search" />
                </td>
        </div>
        </tr>
        <tr>
          <td>
            <span class=""><input type="checkbox" value="Abc Hospital" name="check-tab1" > Abc Hospital</span>
          </td>
      </div>
      </tr>
      <tr>
        <td>
          <span class=""><input type="checkbox" value="XYZ Hospital" name="check-tab1" > XYZ Hospital</span>
        </td>
    </div>
    </tr>
    <tr>
      <td>
        <span class=""><input type="checkbox" value="ABM Laboratory" name="check-tab1"  > ABM Laboratory</span>
      </td>
    </tr>
    </tbody>
    </table>
  </div>
</div>
<div class="col-lg-6">
  <table class="table table-bordered table-hover" id="table-draggable2">
    <thead>
      <tr>
        <th>
        </th>
        <th>
          No
        </th>
        <th>
          Name
        </th>
        <th>
          Pick Up Time
        </th>
      </tr>
    </thead>
    <tbody class="connectedSortable">
      <tr>
        <td></td>
        <td>1</td>
        <td>Abc Hospital</td>
        <td>10:34:56</td>
      </tr>
      <tr>
        <td></td>
        <td>1</td>
        <td>Abc Hospital</td>
        <td>10:34:57</td>
      </tr>
      <tr>
        <td></td>
        <td>1</td>
        <td>Abc Hospital</td>
        <td>10:34:58</td>
      </tr>
    </tbody>
  </table>
</div>
<div class="row">
  <div class="col-lg-10"></div>
</div>



<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

Answer 1

根据您的逻辑，您已将第一个元素限制为不能拖动。

items: "> tr:not(:first)",

删除它，然后您的代码将开始对表格行进行排序。

为了更好的方法，您可以从 Jquery 可排序示例中获取帮助：https://jqueryui.com/sortable/#connect-lists