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

Question

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

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

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