Javascript实现数组中的元素上下移动


Posted in Javascript onApril 28, 2017

前言

我们交换数组可以实现元素上下移动了,这个效果我们在表格或以前排序算法中都会用到,下面来看一个JavaScript下实现交换数组元素上下移动例子

在写项目的时候,要实现一个数组记录上下移动的示例。写起来也没有没麻烦,无非是交换数组元素。最终实现代码如下,比较重要的是那个函数。

示例代码:

// 交换数组元素
  var swapItems = function(arr, index1, index2) {
    arr[index1] = arr.splice(index2, 1, arr[index1])[0];
    return arr;
  };
 
  // 上移
  $scope.upRecord = function(arr, $index) {
    if($index == 0) {
      return;
    }
    swapItems(arr, $index, $index - 1);
  };
 
  // 下移
  $scope.downRecord = function(arr, $index) {
    if($index == arr.length -1) {
      return;
    }
    swapItems(arr, $index, $index + 1);
  };

合理使用那个方法,可以实现置顶和最底的一些实现。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
用JavaScript对JSON进行模式匹配(Part 1-设计)
Jul 17 Javascript
jQuery Mobile页面跳转后未加载外部JS原因分析及解决
Mar 18 Javascript
使用百度地图api实现根据地址查询经纬度
Dec 11 Javascript
在JavaScript中如何解决用execCommand(
Oct 19 Javascript
MUI  Scroll插件的使用详解
Apr 13 Javascript
Vue自定义事件(详解)
Aug 19 Javascript
微信小程序开发之好友列表字母列表跳转对应位置
Sep 26 Javascript
Angularjs中的$apply及优化使用详解
Jul 02 Javascript
微信小程序实现聊天对话(文本、图片)功能
Jul 06 Javascript
vue动态改变背景图片demo分享
Sep 13 Javascript
浅析vue-router原理
Oct 19 Javascript
JS数组方法concat()用法实例分析
Jan 18 Javascript
jQuery使用eraser.js插件实现擦除、刮刮卡效果的方法【附eraser.js下载】
Apr 28 #jQuery
JS简单判断滚动条的滚动方向实现方法
Apr 28 #Javascript
JS组件系列之MVVM组件 vue 30分钟搞定前端增删改查
Apr 28 #Javascript
JS实现禁止用户使用Ctrl+鼠标滚轮缩放网页的方法
Apr 28 #Javascript
jquery实现图片上传前本地预览
Apr 28 #jQuery
JS组件系列之MVVM组件构建自己的Vue组件
Apr 28 #Javascript
JS实现汉字与Unicode码相互转换的方法详解
Apr 28 #Javascript
You might like
ThinkPHP模板之变量输出、自定义函数与判断语句用法
2014/11/01 PHP
php实现在多维数组中查找特定value的方法
2015/07/29 PHP
php文档工具PHP Documentor安装与使用方法
2016/01/25 PHP
PHP正则表达式过滤html标签属性(DEMO)
2016/05/04 PHP
php基于mcrypt_encrypt和mcrypt_decrypt实现字符串加密解密的方法
2016/07/12 PHP
PHP中explode函数和split函数的区别小结
2016/08/24 PHP
Yii核心验证器api详解
2016/11/23 PHP
laravel Model 执行事务的实现
2019/10/10 PHP
setInterval 和 setTimeout会产生内存溢出
2008/02/15 Javascript
使用jquery为table动态添加行的实现代码
2011/03/30 Javascript
如何解决Jquery库及其他库之间的$命名冲突
2013/09/15 Javascript
javascript定义变量时带var与不带var的区别分析
2015/01/12 Javascript
jquery简单图片切换显示效果实现方法
2015/01/14 Javascript
angularJS 中$attrs方法使用指南
2015/02/09 Javascript
Javascript中prototype属性实现给内置对象添加新的方法
2015/05/14 Javascript
浅谈JavaScript中指针和地址
2015/07/26 Javascript
JQuery实现鼠标滚轮滑动到页面节点
2015/07/28 Javascript
微信小程序 页面跳转和数据传递实例详解
2017/01/19 Javascript
Vue.js bootstrap前端实现分页和排序
2017/03/10 Javascript
JavaScript运动框架 多值运动(四)
2017/05/18 Javascript
vuejs中监听窗口关闭和窗口刷新事件的方法
2018/09/21 Javascript
layui type2 通过url给iframe子页面传值的例子
2019/09/06 Javascript
小程序按钮避免多次调用接口和点击方案实现(不用showLoading)
2020/04/15 Javascript
[05:02]2014DOTA2 TI中国区预选赛精彩TOPPLAY第三弹
2014/06/25 DOTA
[48:56]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 VG vs KG
2018/03/31 DOTA
详解python 拆包可迭代数据如tuple, list
2017/12/29 Python
python3+PyQt5重新实现自定义数据拖放处理
2018/04/19 Python
美国现代家具和家居商店:Apt2B
2016/08/29 全球购物
Tuckernuck官网:经典的美国品质服装、鞋子和配饰
2021/01/11 全球购物
幼儿园新学期寄语
2014/01/18 职场文书
甜点店创业计划书
2014/01/27 职场文书
关于中国梦的演讲稿
2014/04/23 职场文书
优质护理服务演讲稿
2014/05/07 职场文书
大学生军训自我鉴定范文
2014/09/18 职场文书
党的群众路线教育实践活动自我剖析材料
2014/10/08 职场文书
php 防护xss,PHP的防御XSS注入的终极解决方案
2021/04/01 PHP