<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="http://cdn.bootcss.com/jquery/2.2.2/jquery.min.js"></script>
<style type="text/css">
p{
border:1px solid #bbb;
width: 200px;
margin-bottom: 30px;
text-align: center;
}
p{
background: #ddd;
cursor: pointer;
}
</style>
</head>
<body>
<h4>收藏(点击移除收藏)</h4>
<p id="box1">
<p class="yes">IIIII</p>
<p class="yes">MKMKMK</p>
</p>
<h4>未收藏(点击添加收藏)</h4>
<p id="box2">
<p class="no">AAAA</p>
<p class="no">CCCC</p>
<p class="no">KKKK</p>
<p class="no">pppp</p>
<p class="no">8888</p>
<p class="no">gggg</p>
<p class="no">6666</p>
<p class="no">989898</p>
<p class="no">RRRRuuu</p>
<p class="no">kkkk</p>
<p class="no">ZXZXZX</p>
</p>
<script>
!function(){
$("body").on("click",".no",function(){
var a=$(this).addClass("yes").removeClass("no");
$("#box1").append(a);
});
$("body").on("click",".yes",function(){
var a=$(this).addClass("no").removeClass("yes");
$("#box2").append(a);
});
}()
</script>
</body>
</html>一个可以收藏和移除收藏的功能，怎么实现在两个box之间 多次来回重复交换之后 列表的排序还是最初原来的顺序？？实现这种按原顺序排序有哪些好的实现思路？？谢谢！
