Jquery UI可以用固定的地方排序

Question

我有一些代码片段，它提供了两个相互连接的可排序列表。一切都很好。

演示 - jsFiddle example

在演示的字母在排序的开始或结束或下降之间。一般来说，所有的字母都是歪斜的，没有空格。这是可以排序的自然行为。但是现在我想移动（拖动&放下）字母。

我想将位置3 [例如字母N]的信放在下面列表的第3位，而不是在左边。除了我希望这个可排序的列表[现在没有字母N]不要被压缩，但它们之间的差距应该保持不变。除了我希望在ul元素上保持可排序的行为，这样我就可以将字母/空格相互排序，将间隙移动到其他位置，但只能在同一个可排序列表中进行排序。

我试图用span来代替li元素，然后断开连接列表并使用可拖动和可拖拽但我不知道如何使它正确。我尝试了两种方法。

FIRST：为li元素添加span使li元素变成某种类型的存储桶（每个存储桶只能存放一个字母）。然后只需添加：

$("#letters li span").draggable({ 
     connectToSortable: "#subword", 
     revert: "invalid" 
    }); 

    $("#subword li span").draggable({ 
     connectToSortable: "#letters", 
     revert: "invalid" 
    }); 

但它只是使跨度在排序的末尾，而不是我拖&下降到li元素里面。

SECOND：添加li droppable和span拖动，但我不能使用li排序。我总是会拖动里面的span元素。

有人可以帮助我，因为我处于死路一条。如果有什么不好解释，请问。提前致谢！

Answer 1

演示：http://jsfiddle.net/proqb/5qupZ/

这里是JS的一小段：

$(function() { 
    $("#sortable1").sortable(); 
    $("#sortable2").sortable(); 

    $(".droppable").droppable({ 
     accept: ".alienNode", 
     drop: function (event, ui) { 

        ui.draggable.parent().droppable("enable"); 

      $(this).append("<div class='alienNode'>" + ui.draggable.html() + '</div>'); 

      ui.draggable.remove(); 

      $(this).find(".alienNode").draggable({ 
       handle: ".handler", 
       revert: "invalid" 
      }); 

      $(this).droppable("disable"); 

     } 
    }); 

    $(".prerender").droppable("disable"); 

    $(".alienNode").draggable({ 
     handle: ".handler", 
     revert: "invalid" 
    }); 
}); 

这种解决方案的总体思路是，你不使用connectedSortable。

有两个可排序的列表。每个列表包含Draggable Droppables（现在透明 - 如果你想看到它们 - 你可以给它们背景颜色属性）。这些子节点仅接受具有某个类属性的元素，因此您只能在其中放置特定的节点。最后是一个内部节点，它是一个纯粹的Draggable，它具有这个固定类属性，并且可以在两个列表中删除。

可排序列表的长度当然可以动态更改，因此您不必限制自己使用固定数量的起始元素，但这取决于您和您的需求。

如果你想用我的解决方案也有少数情况下，你将不得不解决，如：

1）onRevert事件的自定义（这是不是在JQuery中定义的事件及其misfunction可导致重复节点），或者你可以用别的东西代替它的机制。

2）为可排序的UL-s制作背景图像网格，以便您能够查看元素可以拖到哪里，或者可能实现占位符机制。 3）制作合适的处理程序，以便可以直观地拖动节点。目前你可以通过字母（这是内部节点的处理程序）或黑色背景（它充当内部节点容器的处理程序）进行拖动。 4）使拖动器坚持拖放区域也可能是一个好主意。

我不认为你之前开发的机制可以在我的解决方案中工作，但你可以尝试在我的例子中重新实现它。

最后 - 如果你满足任何其他问题，您可以随时切换到YUI，如果你想定制机制，更快，更准确的说，这里是将&跌段里面有很多更多的选择：http://yuilibrary.com/yui/docs/dd/ :)

我希望一些这将帮助你无论如何:)