[英]Jquery: Drag and drop rows
首先,我將解釋代碼:
視圖
<table class="table">
<thead style="color:white">
<tr>
<th><a href="{{route('admin.projects.order', ['field' => 'id','order' => 'asc'])}}"><span class="glyphicon glyphicon-arrow-up" id="orderByIdAsc"></span></a>ID<a href="{{route('admin.projects.order', ['field' => 'id','order' => 'desc'])}}"><span class="glyphicon glyphicon-arrow-down" id="orderByIdDesc"></span></a></th>
<th><a href="{{route('admin.projects.order', ['field' => 'slug','order' => 'asc'])}}"><span class="glyphicon glyphicon-arrow-up" id="orderBySlugAsc"></span></a>SLUG<a href="{{route('admin.projects.order',['field' => 'slug','order' => 'desc'])}}"><span class="glyphicon glyphicon-arrow-down" id="orderBySlugDown"></span></a></th>
<th><a href="{{route('admin.projects.order', ['field' => 'order','order' => 'asc'])}}"><span class="glyphicon glyphicon-arrow-up" id="orderByOrderAsc"></span></a>ORDER<a href="{{route('admin.projects.order', ['field' => 'order','order' => 'desc'])}}"><span class="glyphicon glyphicon-arrow-down" id="orderByOrderDesc"></span></a></th>
<th><a href="{{route('admin.projects.order', ['field' => 'public','order' => 'asc'])}}"><span class="glyphicon glyphicon-arrow-up" id="orderByPublicAsc"></span></a>PUBLIC<a href="{{route('admin.projects.order', ['field' => 'public','order' => 'desc'])}}"><span class="glyphicon glyphicon-arrow-down" id="orderByPublicDesc"></span></a></th>
<th><span class="glyphicon glyphicon-cog"></span></th>
</tr>
</thead>
<tbody style="color:white">
@foreach ($projects as $key => $project)
<tr>
<td>{{$project->id}}</td>
<td>{{$project->slug}}</td>
<td>{{$project->order}}</td>
<td>{{$project->public}}</td>
<td><a href="{{ route('admin.projects.show', $project->id)}}" class="btn btn-info btn-sm">View</a> <a href="{{ route('admin.project.edit', $project->id)}}" class="btn btn-success btn-sm">Edit</a></td>
</tr>
@endforeach
</tbody>
</table>
我想使其可拖動(按行)
我看到這樣的代碼,但是不起作用:
$('.sorted_table').sortable({
containerSelector: 'table',
itemPath: '> tbody',
itemSelector: 'tr',
placeholder: '<tr class="placeholder"/>'
});
知道怎么做嗎?
如有任何疑問,請告訴我。
非常感謝。
視圖必須如下所示:
<div id="tabs">
<div class="col-md-12" id="current">
@include('cms.public.views.partials._messages')
<div id="table1">
<table class="table">
<thead style="color:white">
<tr>
<th><a href="{{route('admin.projects.order', ['field' => 'id','order' => 'asc'])}}"><span class="glyphicon glyphicon-arrow-up" id="orderByIdAsc"></span></a>ID<a href="{{route('admin.projects.order', ['field' => 'id','order' => 'desc'])}}"><span class="glyphicon glyphicon-arrow-down" id="orderByIdDesc"></span></a></th>
<th><a href="{{route('admin.projects.order', ['field' => 'slug','order' => 'asc'])}}"><span class="glyphicon glyphicon-arrow-up" id="orderBySlugAsc"></span></a>SLUG<a href="{{route('admin.projects.order',['field' => 'slug','order' => 'desc'])}}"><span class="glyphicon glyphicon-arrow-down" id="orderBySlugDown"></span></a></th>
<th><a href="{{route('admin.projects.order', ['field' => 'order','order' => 'asc'])}}"><span class="glyphicon glyphicon-arrow-up" id="orderByOrderAsc"></span></a>ORDER<a href="{{route('admin.projects.order', ['field' => 'order','order' => 'desc'])}}"><span class="glyphicon glyphicon-arrow-down" id="orderByOrderDesc"></span></a></th>
<th><a href="{{route('admin.projects.order', ['field' => 'public','order' => 'asc'])}}"><span class="glyphicon glyphicon-arrow-up" id="orderByPublicAsc"></span></a>PUBLIC<a href="{{route('admin.projects.order', ['field' => 'public','order' => 'desc'])}}"><span class="glyphicon glyphicon-arrow-down" id="orderByPublicDesc"></span></a></th>
<th><span class="glyphicon glyphicon-cog"></span></th>
</tr>
</thead>
<tbody style="color:white">
@foreach ($projects as $key => $project)
<tr>
<td>{{$project->id}}</td>
<td>{{$project->slug}}</td>
<td>{{$project->order}}</td>
<td>{{$project->public}}</td>
<td><a href="{{ route('admin.projects.show', $project->id)}}" class="btn btn-info btn-sm">View</a> <a href="{{ route('admin.project.edit', $project->id)}}" class="btn btn-success btn-sm">Edit</a></td>
</tr>
@endforeach
</tbody>
</table>
<br><br>
</div>
</div>
</div>
jQuery:
$("#tabs").tabs();
$("tbody").sortable({
items: "> tr",
appendTo: "parent",
helper: "clone"
}).disableSelection();
$("#tabs ul li a").droppable({
hoverClass: "drophover",
tolerance: "pointer",
drop: function(e, ui) {
var tabdiv = $(this).attr("href");
$(tabdiv + " table tr:last").after("<tr>" + ui.draggable.html() + "</tr>");
ui.draggable.remove();
}
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.