JQuery AppendTo Error

Question

I am working with some jquery and have discovered strange behavior of the jquery function .appendTo().

Check out this code here .

When you click on each item in the first column, the clicked item is added to the second column.

If you click the elements 3and 4, everything will work as expected: they will be added in the order in which you clicked them. When you click on an item 1, it will also be added correctly.

The problem is when you click on an item 2. This item is inside the item 1.

This element is not added to the end of the div, it is added on top of its old parent!

See images:

Now, what did I expect from what I get:

2, div.

? ?

?

Ps: JQuery 1.10.1

Answer 1

2, "click" 2 , 2 ( "click"), 1. , .

, 2 . 2 . 1, . 1 2, ( ) 2 1.

: .

, :

$('.item').on('click', function(e){
    // Append clicked item on destiny div
    $(this).appendTo($('.destiny'));
    e.stopPropagation(); // stop the event from bubbling further up
});