Jquery拖放功能问题

Posted

技术标签:

【中文标题】Jquery拖放功能问题【英文标题】：Jquery Drag and Drop functionality issue 【发布时间】：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)*80px;" 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)"  />$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)"  />$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>

【问题讨论】：

【参考方案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】：

考虑以下示例。如果您确实需要使用 &lt;div&gt; 元素，则必须为您的 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"  />
      <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"  />
      <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"  />
      <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"  />
      <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>

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

希望对您有所帮助。

【讨论】：

以上是关于Jquery拖放功能问题的主要内容，如果未能解决你的问题，请参考以下文章

今天想用jquery来实现div的拖放功能

jquery实现添加到购物车拖放功能 像百度旅游定制旅游一样 如下图

拖放功能和箭头图

如何在rails中添加拖放功能[关闭]

Jquery拖放验证

在 iPad Web App 上拖放 - 同时保留滚动功能