JqueryUI 행을 봉쇄 상단으로 이동할 수 없습니다.

나는 JqueryUI를 사용하는 테이블을 가지고 있으며 테이블 안쪽으로 끌어서 놓기를 시도하고 있습니다. 나는 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/

어떻게 코드를 드래그하여 표의 상단에 행을 드롭 할 수 있기를 해결할 수 있습니까?

출처

2017-11-23 Lluís Puig Ferrer