Move element between containers with same order using jQuery

Question

I have two panels, one on the left and another one on the right side. There are many spans in the left panel. When user clicks on any span in the left panel, I move them to right panel using the following code:

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

Everything is OK, just If user clicks on the 5th span first, then clicks on 2nd span, I want the 2nd span to be before 5th span.

I want the spans to move with same other in the left panel.

Note: Please do not suggest to use jQuery.prepend() function. Think about other spans too.

This question could be helpful in terms of inserting spans into right-panel and then reordering them based on some condition — Artyom Neustroev
– Artyom Neustroev, Commented Mar 11, 2014 at 20:30
@andrew assume that there is 5th span on the right side and now we want insert the 2nd one. — Ali
– Ali, Commented Mar 11, 2014 at 20:34

Community · Accepted Answer · 2017-05-23 12:27:07Z

2

First store a data variable with each span to indicate it's original position. Then use .sort() to sort the spans based on the index:

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'));
});

As KevinB points out in the comments. jQuery's .sort() is not documented and so if you prefer you can use the native Javascript Array.prototype.sort().

edited May 23, 2017 at 12:27

CommunityBot

11 silver badge

answered Mar 11, 2014 at 20:47

MrCode

64.6k10 gold badges95 silver badges114 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user400654 Over a year ago

it might not be as pretty, but i'd suggest using Array.prototype.sort instead, just in case $.fn.sort is removed one day (it isn't documented.) jsfiddle.net/saS5R/2

MrCode Over a year ago

Good point, added your demo to the answer (hope you don't mind) :)

Game Over · Accepted Answer · 2014-03-11 21:00:37Z

-1

i think you have to add a filed to the panel. or use other filed of their sequence

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

then you need loop all panel on right to get the max or min sort_id or the closest sort_id

at last you can use insertBefore() or insertAfter() to add this panel

edited Mar 11, 2014 at 21:00

answered Mar 11, 2014 at 20:35

Game Over

66 bronze badges

3 Comments

Ali Over a year ago

This methods needs a lot of loops through DOM elements

RyanS Over a year ago

Dont use arbitrary attributes, use data: stackoverflow.com/questions/8225918/…

Game Over Over a year ago

it just a example. we need know how to sort them or their original sequence. this will be less calculation

Collectives™ on Stack Overflow

Move element between containers with same order using jQuery

2 Answers 2

2 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related