Javascript 使用jQuery在具有相同顺序的容器之间移动元素

我有两个面板，一个在左边，另一个在右边。左面板中有许多跨。当用户单击左面板中的任何跨距时，我使用以下代码将其移动到右面板：

$(".left-panel span").click(function(){
    $(".right-panel").append(this);
});

一切都很好，只要用户先点击第5档，然后点击第2档，我希望第2档在第5档之前

我希望跨距与左侧面板中的相同跨距一起移动

---

注意：请不要建议使用

jQuery.prepend（）

函数。还可以考虑其他跨距。

我认为您必须在面板中添加一个字段。或使用其序列的其他字段

<span sort_id="1" ..../〉  ..

---

首先在每个跨度中存储一个
数据
变量，以指示其原始位置。然后使用
.sort（）
根据索引对跨距进行排序：



正如评论中指出的那样。jQuery的
.sort（）
没有文档记录，因此如果您愿意，可以使用本机Javascript




在将跨距插入右侧面板时可能会有所帮助，然后根据某些条件对跨距进行重新排序右侧是否有跨距开始？@Freak_Droid那么在什么之前插入？@andrew假设右侧有第五个跨距，现在我们要插入第二个跨距。@ArtyomNeustroev Nice！这个方法需要大量通过DOM元素的循环。不要使用任意属性，使用数据：这只是一个例子。我们需要知道如何对它们或它们的原始序列进行排序。这将减少计算量它可能没有那么漂亮，但我建议使用
Array.prototype.sort
，以防万一
$.fn.sort
有一天被删除（没有文档记录）。很好，在答案中添加了您的演示（希望您不介意）：）
$(".left-panel span").each(function(){
   $(this).data('sort', $(this).index()); 
});

$(".left-panel span").click(function(){
    $(".right-panel").append(this);

    $('.right-panel span').sort(function(a, b){
        return $(a).data('sort') > $(b).data('sort');
    }).appendTo($('.right-panel'));
});