JS实现一个列表中包含上移下移删除等功能


Posted in Javascript onSeptember 24, 2014

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

先看一下页面的截图
JS实现一个列表中包含上移下移删除等功能

看一下它的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方法写出来,大家可以根据具体情况而定。

Javascript 相关文章推荐
xml 与javascript结合的问题解决方法
Mar 24 Javascript
javascript中的Base64、UTF8编码与解码详解
Mar 18 Javascript
基于javascript实现九九乘法表
Mar 27 Javascript
值得分享和收藏的Bootstrap学习教程
May 12 Javascript
详解基于javascript实现的苹果系统底部菜单
Dec 02 Javascript
javascript实现简易计算器
Feb 01 Javascript
node.js实现微信JS-API封装接口的示例代码
Sep 06 Javascript
Django使用多数据库的方法
Sep 06 Javascript
jQuery实现获取选中复选框的值实例详解
Jun 28 jQuery
Vue服务端渲染实践之Web应用首屏耗时最优化方案
Mar 22 Javascript
JS中数据结构与算法---排序算法(Sort Algorithm)实例详解
Jun 17 Javascript
vue中解决chrome浏览器自动播放音频和MP3语音打包到线上的实现方法
Oct 09 Javascript
一个JavaScript函数把URL参数解析成Json对象
Sep 24 #Javascript
js监听鼠标点击和键盘点击事件并自动跳转页面
Sep 24 #Javascript
JavaScript设计模式之单例模式实例
Sep 24 #Javascript
JavaScript中实现异步编程模式的4种方法
Sep 24 #Javascript
JavaScript设计模式之观察者模式(发布者-订阅者模式)
Sep 24 #Javascript
JavaScript获取图片真实大小代码实例
Sep 24 #Javascript
再探JavaScript作用域
Sep 24 #Javascript
You might like
php iconv() : Detected an illegal character in input string
2010/12/05 PHP
基于PHP的简单采集数据入库程序
2014/07/30 PHP
thinkPHP中分页用法实例分析
2015/12/26 PHP
让iframe框架网页在任何浏览器下自动伸缩
2006/08/18 Javascript
另一个javascript小测验(代码集合)
2011/07/27 Javascript
设为首页加入收藏兼容360/火狐/谷歌/IE等主流浏览器的代码
2013/03/26 Javascript
22点关于jquery性能优化的建议
2014/05/28 Javascript
javascript日期操作详解(脚本之家整理)
2015/09/05 Javascript
深入理解jQuery 事件处理
2016/06/14 Javascript
Bootstrap Table使用整理(三)
2017/06/09 Javascript
jQuery.Form实现Ajax上传文件同时设置headers的方法
2017/06/26 jQuery
node.js的exports、module.exports与ES6的export、export default深入详解
2017/10/26 Javascript
jquery获取transform里的值实现方法
2017/12/12 jQuery
Vue自定义过滤器格式化数字三位加一逗号实现代码
2018/03/23 Javascript
JavaScript轮播停留效果的实现思路
2018/05/24 Javascript
Vue中keep-alive组件的深入理解
2020/08/23 Javascript
解决ant design vue 表格a-table二次封装,slots渲染的问题
2020/10/28 Javascript
Webpack3+React16代码分割的实现
2021/03/03 Javascript
使用cx_freeze把python打包exe示例
2014/01/24 Python
Python base64编码解码实例
2015/06/21 Python
python常见排序算法基础教程
2017/04/13 Python
python微信跳一跳系列之棋子定位颜色识别
2018/02/26 Python
python 字典 按key值大小 倒序取值的实例
2018/07/06 Python
win10子系统python开发环境准备及kenlm和nltk的使用教程
2019/10/14 Python
Python基于BeautifulSoup爬取京东商品信息
2020/06/01 Python
15个应该掌握的Jupyter Notebook使用技巧(小结)
2020/09/23 Python
波兰品牌鞋履在线商店:Eastend.pl
2020/01/11 全球购物
白血病捐款倡议书
2014/05/14 职场文书
复试通知单模板
2015/04/24 职场文书
导游词之上海东方明珠塔
2019/09/25 职场文书
python自动化调用百度api解决验证码
2021/04/13 Python
python基于tkinter实现gif录屏功能
2021/05/19 Python
matlab xlabel位置的设置方式
2021/05/21 Python
制作能在nginx和IIS中使用的ssl证书
2021/06/21 Servers
浅析Django接口版本控制
2021/06/26 Python
Python实现生活常识解答机器人
2021/06/28 Python