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 相关文章推荐
基于jquery的DIV随滚动条滚动而滚动的代码
Jul 20 Javascript
js隐藏与显示回到顶部按钮及window.onscroll事件应用
Jan 25 Javascript
javascript中的=等号个数问题两个跟三个有什么区别
Oct 23 Javascript
JavaScript实现的双向跨域插件分享
Jan 31 Javascript
JS+CSS实现模仿浏览器网页字符查找功能的方法
Feb 26 Javascript
深入理解JavaScript编程中的原型概念
Jun 25 Javascript
Javascript实现获取及设置光标位置的方法
Jul 21 Javascript
正则表达式替换html元素属性的方法
Nov 26 Javascript
vue router仿天猫底部导航栏功能
Oct 18 Javascript
利用jsonp解决js读取本地json跨域的问题
Dec 11 Javascript
vue中的mescroll搜索运用及各种填坑处理
Oct 30 Javascript
在VUE中使用lodash的debounce和throttle操作
Nov 09 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
深入探讨<br />和 \r\n两者有什么区别??
2013/06/05 PHP
控制PHP的输出:缓存并压缩动态页面
2013/06/11 PHP
php页面函数设置超时限制的方法
2014/12/01 PHP
浅谈php提交form表单
2015/07/01 PHP
将PHP程序中返回的JSON格式数据用gzip压缩输出的方法
2016/03/03 PHP
PHP检测链接是否存在的代码实例分享
2016/05/06 PHP
PHP中PCRE正则解析代码详解
2019/04/26 PHP
php5.3/5.4/5.5/5.6/7常见新增特性汇总整理
2020/02/27 PHP
关于JavaScript与HTML的交互事件
2013/04/12 Javascript
Jquery实现的角色左右选择特效
2014/05/21 Javascript
使用javascript实现雪花飘落的效果
2015/01/13 Javascript
.NET微信公众号开发之创建自定义菜单
2015/07/16 Javascript
ClearTimeout消除闪动实例代码
2016/02/29 Javascript
AngularJS中关于ng-class指令的几种实现方式详解
2016/09/17 Javascript
详解打造 Vue.js 可复用组件
2017/03/24 Javascript
Javascript实现找不同色块的游戏
2017/07/17 Javascript
详解Javascript中new()到底做了些什么?
2018/03/29 Javascript
解决Nodejs全局安装模块后找不到命令的问题
2018/05/15 NodeJs
浅析前端路由简介以及vue-router实现原理
2018/06/01 Javascript
jQuery实现评论模块
2020/08/19 jQuery
vue-cli 3如何使用vue-bootstrap-datetimepicker日期插件
2021/02/20 Vue.js
python利用Tesseract识别验证码的方法示例
2019/01/21 Python
python使用pymongo操作mongo的完整步骤
2019/04/13 Python
Python机器学习工具scikit-learn的使用笔记
2021/01/28 Python
一款利用css3的鼠标经过动画显示详情特效的实例教程
2014/12/29 HTML / CSS
阿迪达斯加拿大官网:Adidas加拿大
2016/08/25 全球购物
THE OUTNET美国官网:国际设计师品牌折扣网站
2017/03/07 全球购物
职业生涯规划设计步骤
2014/01/12 职场文书
迟到检讨书900字
2014/01/14 职场文书
演讲主持词
2014/03/18 职场文书
关于安全的广播稿
2014/10/23 职场文书
2015年征兵工作总结
2015/07/23 职场文书
《确定位置》教学反思
2016/02/18 职场文书
2016年党员读书月活动总结
2016/04/06 职场文书
十大最强飞行系宝可梦,BUG燕上榜,第二是飞行系王者
2022/03/18 日漫
服务器nginx权限被拒绝解决案例
2022/09/23 Servers