Jquery拖放功能问题答案

【问题标题】：Jquery Drag and Drop functionality issueJquery拖放功能问题
【发布时间】：2019-03-17 13:38:07
【问题描述】：

我有 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>

【问题讨论】：

标签： php jquery laravel jquery-ui jquery-ui-sortable

【解决方案1】：

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>

【讨论】：

【解决方案2】：

考虑以下示例。如果您确实需要使用 <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>

这允许您将服务器分配、移动或取消分配给表。您确实提到了是否需要将同一台服务器分配给多个表。

希望对您有所帮助。

【讨论】：