Jquery 从div和back追加到div

我试着简单地把一个div移到另一个div再移回来。它从左div移动到右div，但不会从右div移动到左div。只是附加到同一个（右）div。我已经尝试过在选择器中使用和不使用“div”以及我能找到的所有其他选项。如果已经回答了，很抱歉

<div id="main" class="main">
<div id="left" class="box">

<div id="user1" class=".usersAll">User1</div>

<div id="user2" class=".usersAll">User2</div>

</div>
<div id="right" class="box">
</div>
</div>


<script type="text/javascript">
$(document).ready(function() {
    $('div#left div.usersAll').on('click', function () { 
        // move from "left" to "right"
        $(this).appendTo("#right");
    });

     $('div#right div.usersAll').on('click', function () { 
       //  move from "right" to "left"
        $(this).appendTo("#left");
    }); 
});
</script>

用户1
用户2
$（文档）.ready（函数（）{
$（'div#left div.usersAll'）。在（'click'，函数（）{
//从“左”移到“右”
$（此）。附加到（“#右”）；
});
$（'div#right div.usersAll'）。在（'click'，函数（）{
//从“右”移到“左”
$（此）。追加到（“#左”）；
}); 
});

由于绑定事件处理程序时元素不存在，因此您可能希望委托

$(document).ready(function() {
    $('#left').on('click', '.usersAll', function () { 
         $(this).appendTo("#right");
    });

     $('#right').on('click', '.usersAll', function () { 
         $(this).appendTo("#left");
    }); 
});

并且您不希望在HTML中的类名中包含句点

$（文档）.ready（函数（）{
$（'#left'）。on（'click'，'.usersAll'，function（）{
$（此）。附加到（“#右”）；
});
$（'#right'）。on（'click'，'.usersAll'，function（）{
$（此）。追加到（“#左”）；
}); 
});
#左{
位置：绝对位置；
边框：1px实心#000；
左：0；
排名：0；
}
#对{
位置：绝对位置；
边框：1px实心#000；
左：200px；
排名：0；
}

用户1
用户2