我有一个使用JqueryUI的表，并且试图在表内进行拖放。为此，我在JqueryUI网页中搜索并找到了
支持多种类型：
选择器：可拖动元素将包含在选择器找到的第一个元素的边界框中。如果未找到任何元素，则不会设置任何围堵。
元素：可拖动元素将包含在此元素的边界框中。
字符串：可能的值：“父”，“文档”，“窗口”。
数组：以[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/
如何修复代码以将行拖放到表格顶部？
最佳答案
简单的方法来解决它放在containment: "#table1",。
关于javascript - JqueryUI不能将行移到容器的顶部，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/47452622/