我有3个div(桌子,餐厅,侍者(服务员)) 所以场景是: 1)创建表格
2)将其拖到餐厅div
3)将服务员拖到桌子上
我使用html的拖放功能。 我想对受特定表影响的服务员列表进行排序。为此我使用了Jquery插件。 现在,我面临的另一个问题是添加插件后我无法从表中删除服务员(将其放回服务员列表)...
这是代码。
<div class="col-md-6">
Restaurant
<div id="restaurant" class="restaurant" ondrop="drop(event,this)" ondragover="allowDrop(event)">
@for($i=1;$i<=count($tables);$i++)
<div id="table_{{$tables[$i-1]->id}}" style="height: {{count($tables[$i-1]->waitersAvailableTable)*80}}px;" class="table_restaurant sortable" draggable="true" ondragstart="drag(event)" ondragover="allowDrop(event)" ondrop="drop(event,this)">Table {{$tables[$i-1]->num_table}}
@foreach($tables[$i-1]->waitersAvailableTable as $waiterTable)
<div id="{{$waiterTable->waiter->id}}" class="waiter" draggable="true" ondragstart="drag(event)" table_id="table_{{$tables[$i-1]->id}}"><img src="{{asset($waiterTable->waiter->user->image)}}" height="40px;" />{{$waiterTable->waiter->user->name}} {{$waiterTable->waiter->user->surname}}</div>
@endforeach
</div>
@endfor
</div>
</div>
<div class="col-md-2">
<div>
<span>Serveurs </span>
</div>
<div id="waiters" class="waiters" ondrop="drop(event,this)" ondragover="allowDrop(event)">
@if(count($waiters)>0)
@foreach($waiters as $waiter)
<div id="{{$waiter->id}}" class="waiter" draggable="true" ondragstart="drag(event)" ><img src="{{asset($waiter->user->image)}}" height="40px;" />{{$waiter->user->name}} {{$waiter->user->surname}}</div>
@endforeach
@else
<li><a href="{{route('showAddWaiter')}}" title="Panel boxes"><span>Ajouter un serveur</span></a></li>
@endif
</div>
</div>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( ".sortable" ).sortable();
$( ".sortable" ).disableSelection();
} );
</script>
答案 0 :(得分:0)
sortable widget内置了很多拖放功能,如果您使用的是小部件,则应删除自己的拖放代码。使用connectWith选项来确定应允许哪些列表在其间拖放项目。必要时,您可以使用事件来挂钩自己的代码,以在项目在列表之间移动时执行操作。
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sortable</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style type="text/css">
.table_restaurant,
.waiters
{
min-height: 30px;
border: 1px solid #000;
}
.waiter
{
border: 1px solid #000;
padding: 5px;
margin: 5px;
}
</style>
</head>
<body>
<div class="row">
<div class="col-md-6">
Restaurant
<div id="restaurant" class="restaurant">
<div id="table_1" class="table_restaurant sortable connectedSortable" draggable="true""
ondrop="drop(event,this)">Table 1
<div id="waiter_1" class="waiter" draggable="true" ondragstart="drag(event)" table_id="table_1">Bob</div>
<div id="waiter_2" class="waiter" draggable="true" ondragstart="drag(event)" table_id="table_1">Alice</div>
</div>
</div>
<div id="table_2" class="table_restaurant sortable connectedSortable" draggable="true"">Table 1
<div id="waiter_3" class="waiter" draggable="true" ondragstart="drag(event)" table_id="table_2">Jim</div>
<div id="waiter_4" class="waiter" draggable="true" ondragstart="drag(event)" table_id="table_2">Zoe</div>
</div>
</div>
<div class="col-md-2">
<div>
<span>Serveurs </span>
</div>
<div id="waiters" class="waiters sortable connectedSortable" ondrop="drop(event,this)">
<div id="waiter_5" class="waiter" draggable="true" ondragstart="drag(event)">John</div>
<div id="waiter_6" class="waiter" draggable="true" ondragstart="drag(event)">Emily</div>
</div>
</div>
</div>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(function () {
$(".sortable").sortable({
connectWith: '.connectedSortable'
}).disableSelection();
});
</script>
</body>
</html>
答案 1 :(得分:0)
请考虑以下示例。如果确实需要使用<div>
元素,则必须为您的Sortable调整items
选项。
$(function() {
$(".waiters").sortable({
connectWith: "ul.waiters",
placeholder: "target-drop"
});
$(".sortable").disableSelection();
});
.waiters {
list-style-type: none;
margin: 0;
padding: 0;
background: #eef;
min-height: 82px;
min-width: 82px;
}
.waiter {
height: 80px;
width: 80px;
text-align: center;
background: #CCCCCF;
margin: 1px;
padding: 4px 2px;
float: left;
}
.target-drop {
height: 78px;
width: 78px;
background: #EEE;
border: 1px dashed #ccc;
float: left;
margin: 1px;
padding: 4px 2px;
}
.waiter .waiter-name {
font-weight: normal;
font-size: .65em;
width: 60px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin: 0;
}
.r-table {
min-height: 90px;
border: 1px solid #CCC;
display: inline-block;
padding: 3px;
text-align: center;
}
.top4 {
width: 90px;
}
.top8 {
width: 172px;
}
.r-table .table-name {
font-weight: normal;
font-size: .65em;
line-height: 10px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="col-md-6">
Restaurant
<div id="restaurant" class="restaurant">
<div id="table-0" class="r-table top4">
<label class="table-name">Table 1</label>
<ul class="waiters">
</ul>
</div>
<div id="table-1" class="r-table top4">
<label class="table-name">Table 2</label>
<ul class="waiters">
</ul>
</div>
<div id="table-2" class="r-table top8">
<label class="table-name">Table 3</label>
<ul class="waiters">
</ul>
</div>
</div>
</div>
<div class="col-md-2">
<div>
<span>Serveurs</span>
</div>
<ul id="waiters" class="waiters" style="padding: 2px; min-height: 86px;">
<li id="waiter-1" class="waiter">
<img src="https://www.freeiconspng.com/uploads/bw-waiter-png-3.png" height="40px;" />
<label class="waiter-name">Bart Simpson</label>
</li>
<li id="waiter-2" class="waiter">
<img src="https://www.freeiconspng.com/uploads/bw-waiter-png-3.png" height="40px;" />
<label class="waiter-name">Lisa Simpson</label>
</li>
<li id="waiter-3" class="waiter">
<img src="https://www.freeiconspng.com/uploads/bw-waiter-png-3.png" height="40px;" />
<label class="waiter-name">Milhouse Van Houten</label>
</li>
<li id="waiter-4" class="waiter">
<img src="https://www.freeiconspng.com/uploads/bw-waiter-png-3.png" height="40px;" />
<label class="waiter-name">Martin Price</label>
</li>
</ul>
<p style="clear: both;">
<a href="{{route('showAddWaiter')}}" title="Panel boxes"><span>Ajouter un serveur</span></a>
</p>
</div>
这允许您将服务器分配,移动或取消分配到表。您确实提到了是否需要将同一服务器分配给多个表。
希望有帮助。