拖放和可排序jquery插件之间的冲突答案

【问题标题】：Conflict between Drag and drop and sortable jquery plugins拖放和可排序jquery插件之间的冲突
【发布时间】：2008-12-17 18:23:21
【问题描述】：

我在尝试混合这些插件时遇到了冲突，我在一些演示中基于我的脚本。问题是，当我在同一个列表中拖动某些东西时，它会触发放置事件，并且该项目被添加到列表的末尾，如果该项目被放置在另一个列表中，这是正确的，但当我放置时不一样它在同一个列表中，我想将它插入到那个位置（如果我禁用 drop 事件，它会起作用）

js代码：

$(document).ready(function() {
      $("#sortlist1").treeview();
      $("#sortlist1").droppable({  
        accept: ".item",  
        drop: function(ev, ui) {
            alert(ui.sender)
            $("#sortlist1").append($(ui.draggable));     
        } 
      });  
      $("#sortlist2").droppable({  
            accept: ".item",
            drop: function(ev, ui) {
                $("#sortlist2").append($(ui.draggable));  
            }  
          });
      $("#sortlist3").droppable({  
            accept: ".item",  
            drop: function(ev, ui) {
                $("#sortlist3").append($(ui.draggable));  
            }  
          });
      $('.sortlist').sortable({
          handle : '.icono',
          update : function () {
              $('input#sortlist').val($('.sortlist').sortable('serialize'));
          }
        });
    });

还有html：

<ul class="sortlist treeview lista" id="sortlist1">
        <li id="listItem_1" class="expandable closed item">
            <div class="hitarea closed-hitarea expandable-hitarea lastExpandable-hitarea">
                <img src="img/arrow_out.png" class="icono" alt="move" />
            </div>
            numero 1<input type="checkbox" />
            <ul class="sortlist" id="sublist">
                <li id="sublistItem_1"><img src="img/arrow_out.png" class="icono" alt="move" />numero 1<input type="checkbox" /></li>
                <li id="sublistItem_2"><img src="img/arrow_out.png" class="icono" alt="move" />numero 2<input type="checkbox" /></li>
            </ul>
        </li>
        <li id="listItem_2" class="item"><img src="img/arrow_out.png" class="icono" alt="move" />numero 2<input type="checkbox" /></li>
        <li id="listItem_3" class="item"><img src="img/arrow_out.png" class="icono" alt="move" />numero 3<input type="checkbox" /></li>
        <li id="listItem_4" class="item"><img src="img/arrow_out.png" class="icono" alt="move" />numero 4<input type="checkbox" /></li>
        <li id="listItem_5" class="item"><img src="img/arrow_out.png" class="icono" alt="move" />numero 5<input type="checkbox" /></li>
        <li id="listItem_6" class="item"><img src="img/arrow_out.png" class="icono" alt="move" />numero 6<input type="checkbox" /></li>
        <li id="listItem_7" class="item"><img src="img/arrow_out.png" class="icono" alt="move" />numero 7<input type="checkbox" /></li>
        <li id="listItem_8" class="item"><img src="img/arrow_out.png" class="icono" alt="move" />numero 8<input type="checkbox" /></li>
        <li id="listItem_9" class="item"><img src="img/arrow_out.png" class="icono" alt="move" />numero 9<input type="checkbox" /></li>
        <li id="listItem_10" class="item"><img src="img/arrow_out.png" class="icono" alt="move" />numero 10<input type="checkbox" /></li>
        <li id="listItem_11" class="item"><img src="img/arrow_out.png" class="icono" alt="move" />numero 11<input type="checkbox" /></li>
  </ul>
  <ul class="sortlist treeview lista" id="sortlist2">
  </ul>
  <ul class="sortlist treeview lista" id="sortlist3">
  </ul>

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

您不能混合使用这些插件：它们处理相同的事件，并且不能一起协作。要么重新考虑你的 UI，要么使用不同的工具。

有可能吗？是的当然。例如，Dojo DnD 只允许使用一个组件进行排序和拖放：test_dnd.html（链接到调试服务器）。

【讨论】：

【解决方案2】：

你可以这样做。

在每个项目中创建两个链接以用作句柄。

使列表可按一个句柄排序。

使列表可由另一个手柄拖动。

现在，当您抓住一个或另一个手柄时，只会激活一个插件，并且会正确处理事件。

【讨论】：

【解决方案3】：

如果您想将<li> 元素从一个列表移动到另一个列表，您可以简单地使用sortable() 的connectWith 属性。只需查看文档即可。

【讨论】：