JQuery Sortable - 不能将元素拖出排序一旦放入

Posted 2023-05-08

【中文标题】JQuery Sortable - 不能将元素拖出排序一旦放入

【英文标题】：JQuery Sortable - Can't drag an element out of sortable once dropped inside

【发布时间】：2020-10-02 21:11:02

【问题描述】：

我在使用 JQueryUI Sortables 时需要一些帮助。我正在尝试做一个文字游戏 类似于您在冰箱中看到的磁性字砖。我有 尝试了辅助选项'clone' 和'original'，甚至还有辅助函数。 我也尝试过动态启用/禁用可排序。我想做的是 将图块拖到中心 div 中，您可以将它们放置在句子中 命令。我可以四处拖动瓷砖并将它们放在游戏场的任何地方，但是 当它们被放到构建行中时，它们被插入到句子中 或附加到末尾。但后来我无法将瓷砖拖出 建造区域。我可以在构建区域内移动它们，但不能拖动它们 出去。我有一个显示问题here 的最小代码。我可以让所有 区域可排序，但随后瓷砖在所有 div 中排序，这不是什么 我需要。

谁能告诉我为什么无法将瓷砖拖出构建区域 以及如何解决这个问题？我有一种感觉，它涉及重新养育孩子 拖动瓷砖，但我不知道该怎么做，或者是否有一些数据 我需要访问的由 JQueryUI 内部构建的结构。

【参考方案1】：

你必须手动关心你的元素：

    function bind_drag()
    $(".tile-drop span").draggable(
    containment : '.container',
    connectToSortable : '#build-area'
  );


function bind_sort()
    $("#build-area").sortable(
            receive : function( event, ui )
      ui.item.draggable()
        ui.item.draggable('disable');


     
  );



$(function()
    bind_sort();
  bind_drag();
var leftButtonDown;
$(document).mousedown(function(e)
   if(e.which === 1) leftButtonDown = true;
);
$(document).mouseup(function(e)
   if(e.which === 1) leftButtonDown = false;
);
  $(".tile-drop").droppable(
    accept : '#build-area span',
     containment: ".container",
        drop: function(ev, ui) 
       if (leftButtonDown)  return;  //for duplicates bug
       if(ui.draggable.hasClass('ui-sortable-helper')) 
          $(ui.draggable).clone(true).remove().appendTo(this);
          $(ui.draggable).remove()
          bind_drag();
          bind_sort();
        
    
  );

);

这里有一些fiddle

另外我想指出，droppable drop 事件目前存在一个错误，这可能导致创建重复：bug

编辑：更新小提琴和代码以修复重复的错误

【讨论】：

我运行了你的小提琴，当我试图将 tile 拖过可排序的 div 时，它创建了 tile 的副本。 （从下到上或从上到下的方向）。

已编辑以解决该问题。第一次测试时，它不会每次都创建重复项。

我可以将它们拖出可排序的对象，但它们不会掉落。它们会在发布时重新回到可排序的对象中。

再次编辑，完全忘记了我们在可排序的接收事件中关闭了可拖动

我想你已经明白了！谢谢！