Question

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

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

一切都很好，只是如果用户先点击第5个跨度，然后点击第2个跨度，我希望第2个跨度在第5个跨度之前。

我希望跨度在左侧面板中与另一个一起移动。

注意：请不要建议使用jQuery.prepend()功能。想想其他跨度。

Answer 1

首先在每个范围内存储一个data变量，以指示其原始位置。然后使用.sort()根据索引对跨度进行排序：

jsFiddle Demo

$(".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'));
});

正如KevinB在评论中指出的那样。 jQuery的.sort()没有记录，因此如果您愿意，可以使用原生Javascript Array.prototype.sort()。

Answer 2

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

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

然后你需要在右边循环所有面板以获得最大或最小sort_id或最接近sort_id

最后你可以使用insertBefore（）或insertAfter（）来添加这个面板

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

2 个答案: