Jquery Drag and Drop - проблема с функциональностью - PullRequest
Новая
       8

Jquery Drag and Drop - проблема с функциональностью

0 голосов
/ 12 октября 2018

У меня есть 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>

Ответы [ 2 ]

0 голосов
/ 15 октября 2018

Рассмотрим следующий пример.Если вам действительно нужно использовать <div> элементы, вам придется настроить параметр items для вашего 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>

Это позволяет назначать, перемещать или неназначенные серверы для таблиц.Вы упомянули, нужно ли назначать один и тот же сервер нескольким таблицам или нет.

Надеюсь, это поможет.

0 голосов
/ 12 октября 2018

Сортируемый виджет имеет множество встроенных функций перетаскивания. Если вы используете виджет, вы должны удалить свой собственный код перетаскивания.Используйте параметр 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>
...