JqueryUI无法将行移动到包含的顶部

Question

我有一个表，我使用JqueryUI，我试图在表内拖放。为了实现这一点，我在JqueryUI网页中搜索并找到了这个

支持多种类型：

选择器：可拖动元素将包含在选择器找到的第一个元素的边界框中。如果未找到任何元素，则不会设置包含。

元素：可拖动元素将包含在此元素的边界框中。

字符串：可能的值：“parent”，“document”，“window”。

数组：一个数组，用于定义[x1，y1，x2，y2]形式的边界框。

我尝试了但无法使其有效。

刀片：

<div id="tabs">
        <div class="col-md-12">
            <div id="table1">
              <table class="table">
                <thead>
                  <tr>
                    <th class="thcenter">ID</th>
                    <th class="thcenter">Visible</th>
                    <th class="thcenter">Nombre</th>
                    <th class="thcenter">Header</th>
                    <th class="thcenter">Home</th>
                    <th class="thcenter">Orden</th>
                    <th class="thcenter"><span class="glyphicon glyphicon-cog"></span>Acciones</th>
                  </tr>
                </thead>
                <tbody id="tbodyproject"> 
                    <tr id="id1" class="trdrag">
                      <td class="idrow tdcenter"><p id="margindata">1</p></td>
                      <td  class="hidden-td" >Testing</td>
                      <td  class="hidden-td">Testing2</td>
                      <td class="tdcenter tdvisible"> 
                        Yes
                      </td>
                      <td class="tdslug"><p id="margindata">Slug</p></td>
                      <td class="tdimg"><img src="http://via.placeholder.com/350x150" class="sizeheader"></td>
                      <td class="tdimg"><img src="http://via.placeholder.com/350x150" class="sizehome"></td>
                      <td class="tdcenter tdorder"><p id="margindata">Order 1</p></td>
                      <td class="tdacciones">
                      <form method="POST" action="{{route('admin.projects.destroy',$project->id)}}" onsubmit="return ConfirmarBorrar()">
                          <a href="#" class="btn btn-success btn-sm" id="margindata">Edit</a> 
                          <input type="submit" value="Delete" class="btn btn-danger btn-sm" id="margindata">
                          <input type="hidden" name="_token" value="Token 1">Delete
                      </form>
                     </td>
                    </tr>
                     <tr id="id1" class="trdrag">
                      <td class="idrow tdcenter"><p id="margindata">2</p></td>
                      <td style="display:none;">Testing</td>
                      <td class="tdcenter tdvisible"> 
                        Yes
                      </td>
                      <td class="tdslug"><p id="margindata">Slug</p></td>
                      <td class="tdimg"><img src="http://via.placeholder.com/350x150" class="sizeheader"></td>
                      <td class="tdimg"><img src="http://via.placeholder.com/350x150" class="sizehome"></td>
                      <td class="tdcenter tdorder"><p id="margindata">Order 1</p></td>
                      <td class="tdacciones">
                      <form method="POST" action="{{route('admin.projects.destroy',$project->id)}}" onsubmit="return ConfirmarBorrar()">
                          <a href="#" class="btn btn-success btn-sm" id="margindata">Edit</a> 
                          <input type="submit" value="Delete" class="btn btn-danger btn-sm" id="margindata">
                          <input type="hidden" name="_token" value="Token 1">Delete
                      </form>
                     </td>
                    </tr>
                     <tr id="id1" class="trdrag">
                      <td class="idrow tdcenter"><p id="margindata">3</p></td>
                      <td style="display:none;">Testing</td>
                      <td class="tdcenter tdvisible"> 
                        Yes
                      </td>
                      <td class="tdslug"><p id="margindata">Slug</p></td>
                      <td class="tdimg"><img src="http://via.placeholder.com/350x150" class="sizeheader"></td>
                      <td class="tdimg"><img src="http://via.placeholder.com/350x150" class="sizehome"></td>
                      <td class="tdcenter tdorder"><p id="margindata">Order 1</p></td>
                      <td class="tdacciones">
                      <form method="POST" action="{{route('admin.projects.destroy',$project->id)}}" onsubmit="return ConfirmarBorrar()">
                          <a href="#" class="btn btn-success btn-sm" id="margindata">Edit</a> 
                          <input type="submit" value="Delete" class="btn btn-danger btn-sm" id="margindata">
                          <input type="hidden" name="_token" value="Token 1">Delete
                      </form>
                     </td>
                    </tr>
                     <tr id="id1" class="trdrag">
                      <td class="idrow tdcenter"><p id="margindata">1</p></td>
                      <td style="display:none;">Testing</td>
                      <td class="tdcenter tdvisible"> 
                        Yes
                      </td>
                      <td class="tdslug"><p id="margindata">Slug</p></td>
                      <td class="tdimg"><img src="http://via.placeholder.com/350x150" class="sizeheader"></td>
                      <td class="tdimg"><img src="http://via.placeholder.com/350x150" class="sizehome"></td>
                      <td class="tdcenter tdorder"><p id="margindata">Order 1</p></td>
                      <td class="tdacciones">
                      <form method="POST" action="{{route('admin.projects.destroy',$project->id)}}" onsubmit="return ConfirmarBorrar()">
                          <a href="#" class="btn btn-success btn-sm" id="margindata">Edit</a> 
                          <input type="submit" value="Delete" class="btn btn-danger btn-sm" id="margindata">
                          <input type="hidden" name="_token" value="Token 1">Delete
                      </form>
                     </td>
                    </tr>
                     <tr id="id1" class="trdrag">
                      <td class="idrow tdcenter"><p id="margindata">4</p></td>
                      <td style="display:none;">Testing</td>
                      <td class="tdcenter tdvisible"> 
                        Yes
                      </td>
                      <td class="tdslug"><p id="margindata">Slug</p></td>
                      <td class="tdimg"><img src="http://via.placeholder.com/350x150" class="sizeheader"></td>
                      <td class="tdimg"><img src="http://via.placeholder.com/350x150" class="sizehome"></td>
                      <td class="tdcenter tdorder"><p id="margindata">Order 1</p></td>
                      <td class="tdacciones">
                      <form method="POST" action="{{route('admin.projects.destroy',$project->id)}}" onsubmit="return ConfirmarBorrar()">
                          <a href="#" class="btn btn-success btn-sm" id="margindata">Edit</a> 
                          <input type="submit" value="Delete" class="btn btn-danger btn-sm" id="margindata">
                          <input type="hidden" name="_token" value="Token 1">Delete
                      </form>
                     </td>
                    </tr>
                    <tr id="id2" class="trdrag">
                      <td class="idrow tdcenter"><p id="margindata">5</p></td>
                      <td class="tdcenter tdvisible"> 
                        Yes
                      </td>
                      <td class="tdslug"><p id="margindata">Slug</p></td>
                      <td class="tdimg"><img src="http://via.placeholder.com/350x150" class="sizeheader"></td>
                      <td class="tdimg"><img src="http://via.placeholder.com/350x150" class="sizehome"></td>
                      <td class="tdcenter tdorder"><p id="margindata">Order 2</p></td>
                      <td class="tdacciones">
                      <form method="POST" action="{{route('admin.projects.destroy',$project->id)}}" onsubmit="return ConfirmarBorrar()">

                          <a href="#" class="btn btn-success btn-sm" id="margindata">Edit</a> 
                          <input type="submit" value="Delete" class="btn btn-danger btn-sm" id="margindata">
                          <input type="hidden" name="_token" value="Token 2">Delete
                      </form>
                      </td>
                    </tr>
                </tbody>
              </table>
              <br><br>
            </div>
        </div>

JS：

$("#tabs").tabs();

$("#tbodyproject").sortable({
    items: "> tr",
    appendTo: "parent",
    helper: "clone",
    placeholder: "placeholder-style",
    containment: "parent",
    start: function(event, ui) {
      $(this).find('.placeholder-style td:nth-child(2)').addClass('hidden-td')
      ui.placeholder.html(ui.item.html());
      ui.placeholder.css('visibility', 'hidden');
    },
    stop: function(event, ui) {
        ui.item.css('display', '')
    },
    helper: function(e, tr)
    {
        var $originals = tr.children();
        var $helper = tr.clone();
        $helper.children().each(function(index)
        {
        // Set helper cell sizes to match the original sizes
        $(this).width($originals.eq(index).width());
        });
        return $helper;
    },
    update: function( event, ui ) {
        let newOrder = $(this).sortable('toArray');
        $.ajax({
            type: "POST",
            url:'/admin/projects/updateOrder',
            data: {ids: newOrder}
        })
       .done(function( msg ) {
        location.reload();        
       });
    }
}).disableSelection();

这是一个带代码的JsFiddle。

https://jsfiddle.net/w52m5ggb/25/

如何修复代码以便能够将行拖放到表格的顶部？

Answer 1

解决问题的简便方法是{{1}}。