0
私はJqueryUIを使用するテーブルを持っていますが、テーブルの中にドラッグアンドドロップするだけです。JqueryUI閉じ込めの先頭に行を移動できません
セレクター：ドラッグ可能な要素はセレクタで最初に見つかった要素のバウンディングボックスに含まれることになる私はJqueryUIのWebページで検索し、サポートこの
複数のタイプを見つけこれを可能にするために、 。要素が見つからない場合、包含は設定されません。
要素：ドラッグ可能な要素は、この要素のバウンディングボックスに含まれます。
文字列：可能な値： "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/
？
私にとってはうまく動作しますが、テーブルの一番下に行をドラッグできないという事実を修正しないでください – toto1911
これは本当に@ toto1911なので、これは修正する方法ではありません –
1つの醜い解決策はまた、 'padding-bottom：10px;'をテーブル要素 – toto1911