I have 3 divs ( Tables, Restaurants, Serveurs ( Waiters) ) so the scenario is : 1)create a table
2) drag it to restaurant div
3) drag waiters to the table
I use drag and drop functionality of html.. I wanted to sort the list of the waiters that are affected to a specific table.. I used Jquery plugin for that.. it worked properly now I'm facing another issue that I couldn't remove a waiter from a table ( drop it back to list of waiters) just after adding that plugin...
This is the code..
<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>
The sortable widget has a lot of drag and drop functionality built in, if you're using the widget, you should remove your own drag and drop code. Use the connectWith option to determine which lists should be allowed to have items drag and drop between them. You can use the events to hook in your own code to do things when items move between lists if necessary.
Example:
<!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>
Consider the following example. If you really need to use <div> elements, you will have to adjust the items option for your Sortable.
$(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>This allows you to assign, move, or unassigned servers to tables. You did mention if you need to assign the same server to multiple tables or not.
Hope that helps.
</div>