javascript - 实现两个box交互后列表排序问题?
高洛峰
高洛峰 2017-04-11 12:58:23
0
0
537
<!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之间 多次来回重复交换之后 列表的排序还是最初原来的顺序??实现这种按原顺序排序有哪些好的实现思路??谢谢!

高洛峰
高洛峰

拥有18年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。 网络人气名人讲师,...

reply all(0)
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!