关键词：
js操作数组移动
//先封装js数组交换顺序方法
/*参数说明
arr是要操作的数组
index1 是准备移动的元素
index2 是准备移动到的位置 往下移就是 index2=index+1
往上移动就是 index2=index+1；
这个也可以在页面试试那个方法就指导了，但是置顶和置底还有点差别
*/
var swapItems = function(arr, index1, index2,direction) {
if(direction==‘up‘){//置顶
arr.unshift(arr[index1]);
arr.splice(index1+1,1);
return arr;
}
if(direction==‘down‘){//置底
arr.push(arr[index1]);
arr.splice(index1,1);
return arr;
}
arr[index1] = arr.splice(index2, 1, arr[index1])[0];
return arr;
};
//然后js调用
function upIndex (index){//置顶
if(index==0){
return;
}
swapItems(myAppList, index,0,‘up‘);
},
function up(index){//上移
if(index == 0) {
return;
}
swapItems(myAppList, index, index - 1);
},
function down(index){//下移
if(index == myAppList.length -1) {
return;
}
swapItems(myAppList, index, index + 1);
},
function downIndex(index){//置底
if(index == myAppList.length -1) {
return;
}
swapItems(myAppList, index,0,‘down‘);
}
到此 js操作数组移动就完成了 下面用到vue项目里面
2. vue操作表格上下移动和置底置顶
项目需求：循环的列表都是dd标签，dd标签右边有四个小按钮从上到下功能依次是：
置顶，上移，下移，置底
html代码
<template id="myAppList">
<dd class="clearfix app appList" v-bind:appid="item.appId" v-for="(index, item) of myAppList">
<div class="dd-left">
<img v-bind:src="item.iconUrl ? item.iconUrl:‘../img/default.png‘" v-bind:alt="item.appName" v-bind:title="item.appName"/>
</div>
<div class="dd-right">
<h5>
<template v-if="item.type==2">
<i v-if="item.permission==0" class="my-permission-label all" title="全部权限"></i>
<i v-if="item.permission==1" class="my-permission-label develop" title="开发权限"></i>
<i v-if="item.permission==2" class="my-permission-label operate" title="运营权限"></i>
</template>
<span class="app-name" v-if="item.type==2" v-text="item.appName+‘*‘"></span>
<span class="app-name" v-if="item.type!=2" v-text="item.appName"></span>
</h5>
<template v-if="item.type==2">
<template v-if="item.permission==1">
<span>{{t "console.add"}}N/A</span>
<span>{{t "console.active"}}N/A</span>
</template>
<template v-else>
<span v-if="item.newUsersCount">{{t "console.add"}}{{newUsersCount}}</span>
<span v-else>{{t "console.add"}}0</span>
<span v-if="item.activeUsersCount">{{t "console.active"}}{{activeUsersCount}}</span>
<span v-else>{{t "console.active"}}0</span>
</template>
</template>
<template v-else>
<span v-if="item.newUsersCount">{{t "console.add"}}{{newUsersCount}}</span>
<span v-else>{{t "console.add"}}0</span>
<span v-if="item.activeUsersCount">{{t "console.active"}}{{activeUsersCount}}</span>
<span v-else>{{t "console.active"}}0</span>
</template>
<div class="moveCon">
<ul>
<template v-if="index!=0">
<li class="upIndex" title="置顶" v-on:click.stop="upIndex(index)"></li>
<li class="up" title="上移" v-on:click.stop="up(index)"></li>
</template>
<template v-else>
<li class="upIndex upel" title="置顶" v-on:click.stop="upIndex(index)"></li>
<li class="up upel" title="上移" v-on:click.stop="up(index)"></li>
</template>
<template v-if="index!=myAppList.length-1">
<li class="down" title="下移" v-on:click.stop="down(index)"></li>
<li class="downIndex" title="置底" v-on:click.stop="downIndex(index)"></li>
</template>
<template v-else>
<li class="down downel" title="下移" v-on:click.stop="down(index)"></li>
<li class="downIndex downel" title="置底" v-on:click.stop="downIndex(index)"></li>
</template>
</ul>
</div>
</div>
</dd>
</template>
项目的需求用到了大量的vi-if去判断来显示不一样的标签，我刚刚接触vue 感觉我这样写html不是最优的，这里我不知道怎么改进....
另外 4个li标签v-if判断 是因为 如果第一个表格在最上面 就失去一个鼠标移动上去出现上移按钮的效果，这个简单提一下
js代码 记得加上上面封装的js操作数组移动的方法
// vue 循环APP列表页面
var myAppList=[];
//获取myAppList列表
function getMyAppList(){
$.ajax({
url: ‘你自己的接口地址‘,
type: ‘GET‘,
dataType: ‘json‘
})
.done(function(data){
if(data&&data.status){
myAppList=data.result;
var vue= new Vue({
el:‘#myAppList‘,
data:{
myAppList:myAppList
},
methods:{
upIndex:function(index){
if(index==0){
return;
}
swapItems(myAppList, index,0,‘up‘);
},
up:function(index){
if(index == 0) {
return;
}
swapItems(myAppList, index, index - 1);
},
down:function(index){
if(index == myAppList.length -1) {
return;
}
swapItems(myAppList, index, index + 1);
},
downIndex:function(index){
if(index == myAppList.length -1) {
return;
}
swapItems(myAppList, index,0,‘down‘);
}
}
})
}
})
}
//代码算是很简单了 ajax请求返会的json 取一个数组放到vue代码里面，作为vue在html页面 v-for的数据源，剩下的的移动功能就是操作数据源这个大数组的排序了。
vue里面应该有类似的方法，但是我没有找到，所以就用了最笨的办法了。
参考资料：
请教jquery对表格的行操作的。对页面表格进行上下移动位置，删除记录的操作。谢谢。如下补充
型号厂商数量封装批号供应商单价操作asdf原装asdf0123上移下移删除model004原装asdasda011上移下移删除model001信息技术原装dasdas025上移下移删除model002信息技术原装dasdas026上移下移删除model003信息技术原装dasdas011上移下移删除asdasd原装... 查看详情
元素的上移下移等排序操作
...项目中，我经常遇到对元素进行排序操作的需求，包括：上移、下移、置顶、置底。那么这些操作如何实现呢？ 上移，简言之就是将需要上移的元素和它前面元素交换位置，使用insertBefore(),大致思路为：vardom=需要上移的元... 查看详情
模仿淘宝卖家的店铺分类
...库。前端代码比较复杂，后台是依靠$_POST[-1][name]的二维数组去执行一并入库，负值 查看详情
js实现数组内数据的上移和下移
varswapItems=function(arr,index1,index2){ arr[index1]=arr.splice(index2,1,arr[index1])[0] returnarr}vararr=[1,2,3]varnewArr=[]upData(arr,index){ if(this.arr.length>1&&index!==0){ newA 查看详情
在PyQt5中上下移动行[重复]
】在PyQt5中上下移动行[重复]【英文标题】：MoverowupanddowninPyQt5[duplicate]【发布时间】：2020-08-1200:41:36【问题描述】：考虑一个QTableWidget和两个按钮“上移”和“下移”。点击上移，当前行应该上移一行，类似于“下移”。实现相... 查看详情
上移下移扩展版总结(代码片段)
...父级上移一位 2）当点击第一个时候将当前按钮的父级移动到最后一位 3）当点击最后一个时候将当前按钮的父级移动到首位4）带过渡动画 需求分析：下移：剪切所点击的条目插入到下一条目后面上移：剪切所点击的条... 查看详情
vue做一个上移和下移，删除的li功能(代码片段)
效果图：思路就是冒泡原理，把数据放到一个空数组，对其进行排序,单选框用到的是iview。具体实现代码：<divv-for="iteminsingledLists":key="item.index">//数组singledLists<Checkbox@on-change="checkSingle":disabled="isDisabled"v-model="item.isRight 查看详情
php怎么实现上下移动排序
参考技术A数据库存一个字段管理排序，移动就改变这个序列号 参考技术B麻烦描述的详细点，不然怎么回答啊？ 参考技术C点按钮上移下移的样子的吗 查看详情
前端页面添加表格，实现每一行能上下移动，还可修改数据库排序字段值(代码片段)
varup="<ahref="javascript:void(0)"onclick="moveUp(this)">上移</a>";vardown="<ahref="javascript:void(0)"onclick="moveDown(this)">下移</a>";<trid="tr_"+i><td>data 查看详情
table中实现数据上移下移效果
...没有开放的上移下移的api,但是能对数据操作，故思路为数组中的一条数据，再重新添加一条数据，办法有点笨，但是好歹也是实现了，望有好的办法的，请留言<el-table:data="tableData"style="width:100%"><el-table-columnprop="date"label="... 查看详情
jqgrid上移下移单元格(代码片段)
...表中的行数保存到数据库中，取数据时按行进行排序1、上移，下移按钮<ahref="javascript:void(0)"onclick="operateWithOneRowById(up)"class="linkButton">上移</a><ahref="javascript:void(0)" 查看详情
div鼠标悬停，子元素上移，鼠标移出，子元素下移动画。
HTML： <divclass="edt_title"><divid="edt_title"><pclass="edt_title_top">e定投</p><divclass="product_line"></div><pclass="edt_title_c">多种期限<br/> 查看详情
jquery实现上下移动div可以用这种方法
//上移$(‘.add_small_wrap‘).on(‘click‘,‘.shangyi‘,function(){var$curBlock=$(this).parents(‘.add_small‘);var$prveBlock=$curBlock.prev(‘.add_small‘);$curBlock.after($prveBlock);});//下移$(‘.add_small_wrap‘). 查看详情
TableView - 单元格的上移和下移功能
...一个TableView的情况。我正在尝试实现一个允许向上或向下移动单元格的功能。向上或向下移动单元格（带有单元格内容）后，我想将焦点更改为单元格的新位置。问题是它不会更改到新位置。由于某种原因，它停留在原来选定的... 查看详情
vim向上移动8行的快捷键是啥？
...答！参考技术A8kvim中好多快捷键在前面都可以加数学向上移动一行的快捷键是k,,在按k之前按个数学,表示移动几行 参考技术B进入到vim界面，按下8k就可以。注意：不要在insert模式下操作。 参考技术C移动光标类命令h：光标左移一... 查看详情
排序js
...面上是一个简单的数据表格，我们在数据行中分别放置“上移”，“下移”和“置顶”三个链接，并且分别定义三个class属性，我们来通过jQuery实现这些操作。<tableclass="table"><tr><td>HTML5获取地理位置定位信息</td>... 查看详情
vi下光标移动
...况下编程我习惯都是这样：先输入然后使用方向键把光标移动到中再输入内容但是如果VI的编辑模式不能方向键移动光标，那么大家都是怎么做的。先是输入，再输入内容，再吗还是有什么命令跳到这之间？求问linux程序员怎么... 查看详情
请问htmltable表格数据选择上移，则这一行数据移到第一行，后面的依次向下移动如何写？
<scripttype="text/javascript">functionup(obj)vartr=obj.parentNode.parentNode;vartbody=tr.parentNode;vartb=tbody.parentNode;varrowIdx=0;for(vari=0;i<tb.rows.length;i++)if(tb.rows[i]==tr)rowIdx=i;break;if(rowIdx==0)return;varpreTr=tb.rows[rowIdx-1];varnextNextObj=tr.nextSibling;... 查看详情