js~一个列表中包含上移下移删除等功能

最近做了一个项目，包括了一个列表页，为了用户体验，操作均使用JS实现，其中包括在列表中实现上移，下移，删除等功能，前台JS，后端数据修改使用AJAX，本文主要说一下前台JS这块

先看一下页面的截图

aaarticlea/png;base64,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" alt="" />

看一下它的HTML结构，当然，这与前台切图有关，后端程序人员只负责写自己的JS这块，我以我们项目为例，看一下它们切的HTML

<ul class="clearfix">
        <li class="courseList">
            <div class="titDefault clearfix">
                <div class="left clearfix">
                    <span class="dragBtn"></span><span class="tit">内容<em class="contIndex">1</em>：</span><em title="2013年 加班.txt" class="titDefaultName">2013年 加班.txt</em>
                </div>
                <div class="mid">2014/9/24 9:54:00</div>
                <div class="right clearfix">
                    <a value="253040" class="moveUpBtn" href="javascript:;"><span class="delTit">上移</span></a>
                    <a value="253040" class="moveDownBtn" href="javascript:;"><span class="delTit">下移</span></a>
                    <a value="253040" class="deleteBtn" href="javascript:;"><span class="delTit">删除</span></a>
                </div>
            </div>
        </li>
        <li class="courseList">
            <div class="titDefault clearfix">
                <div class="left clearfix">
                    <span class="dragBtn"></span><span class="tit">内容<em class="contIndex">2</em>：</span><em title="使用说明.txt" class="titDefaultName">使用说明.txt</em>
                </div>
                <div class="mid">2014/9/24 9:54:00</div>
                <div class="right clearfix">

                    <a value="253041" class="moveUpBtn" href="javascript:;"><span class="delTit">上移</span></a>
                    <a value="253041" class="moveDownBtn" href="javascript:;"><span class="delTit">下移</span></a>
                    <a value="253041" class="deleteBtn" href="javascript:;"><span class="delTit">删除</span></a>
                </div>
            </div>
        </li>
        <li class="courseList">
            <div class="titDefault clearfix">
                <div class="left clearfix">
                    <span class="dragBtn"></span><span class="tit">内容<em class="contIndex">3</em>：</span><em title="占占大师.txt" class="titDefaultName">占占大师.txt</em>
                </div>
                <div class="mid">2014/9/24 9:54:00</div>
                <div class="right clearfix">
                    <a value="253040" class="moveUpBtn" href="javascript:;"><span class="delTit">上移</span></a>
                    <a value="253040" class="moveDownBtn" href="javascript:;"><span class="delTit">下移</span></a>
                    <a value="253040" class="deleteBtn" href="javascript:;"><span class="delTit">删除</span></a>
                </div>
            </div>
        </li>
        <li class="courseList">
            <div class="titDefault clearfix">
                <div class="left clearfix">
                    <span class="dragBtn"></span><span class="tit">内容<em class="contIndex">4</em>：</span><em title="排序问题.txt" class="titDefaultName">排序问题.txt</em>
                </div>
                <div class="mid">2014/9/24 9:54:00</div>
                <div class="right clearfix">

                    <a value="253041" class="moveUpBtn" href="javascript:;"><span class="delTit">上移</span></a>
                    <a value="253041" class="moveDownBtn" href="javascript:;"><span class="delTit">下移</span></a>
                    <a value="253041" class="deleteBtn" href="javascript:;"><span class="delTit">删除</span></a>
                </div>
            </div>
        </li>
    </ul>

下面我们主要看一下JS代码，主要使用JQ的on方法实现的，原因是因为列表的数据有第一次为静态的（bind），当排序后，数据变为动态的（live），所以，这种结构只能使用on才最合理，看一下代码

<script type="text/ecmascript">
        $(function () {
            //上移
            $(".clearfix").on("click", ".moveUpBtn", function () {
                var self = $(this);
                var _old = self.closest("li.courseList");
                var _new = self.closest("li.courseList").prev("li");
                if (_new.length > 0) {
                    var _temp = _old.html();
                    _old.empty().append(_new.html());
                    _new.empty().append(_temp);
                }

            });

            //下移
            $(".clearfix").on("click", ".moveDownBtn", function () {
                var self = $(this);
                var _old = self.closest("li.courseList");
                var _new = self.closest("li.courseList").next("li");
                if (_new.length > 0) {
                    var _temp = _old.html();
                    _old.empty().append(_new.html());
                    _new.empty().append(_temp);
                }
            });

            //删除
            $(".clearfix").on("click", ".deleteBtn", function () {
                var self = $(this);//当前click事件源对象
                self.closest("li.courseList").remove();
            });

        });
    </script>

运行之后，效果就出来了，本JS中没有把与后台交互的AJAX方法写出来，大家可以根据具体情况而定。