JQuery Sortable - 将元素放入 sortable 后无法将其拖出

Question

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

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

Answer 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

编辑：更新了 fiddle 和修复重复错误的代码

JQuery Sortable - 将元素放入 sortable 后无法将其拖出

JQuery Sortable - Can't drag an element out of sortable once dropped inside

jquery

jquery-ui

jquery-ui-sortable