JS Operation Array MovementFirst encapsulate the JS array Exchange order Method/* Parameter Description arr is the array to manipulate index1 is the element that is ready to move Index2 is ready to move to the position of the move Down is index2=index+1 upward movement is index2=index+ 1. This can also be on the page to try that method on the guide, but the top and bottom still a little different * *
var swapitems = function (arr, index1, index2,direction) {
if (direction== ' up ') {//Sticky
Arr.unshift (Arr[index1]);
Arr.splice (index1+1,1);
return arr;
}
if (direction== ' down ') {//Bottom
Arr.push (Arr[index1]);
Arr.splice (index1,1);
return arr;
}
Arr[index1] = Arr.splice (index2, 1, arr[index1]) [0];
return arr;
};Then JS calls function Upindex (index) {//PIN if (index==0) {return;} Swapitems (Myapplist, index,0, ' up ');},function up (index) {//Move up if (index = = 0) {return;} Swapitems (myapplist, index, index-1);},function down (index) {//Move Down if (index = = myapplist.length-1) {return;} Swapitems (myapplist, index, index + 1),},function Downindex (index) {//Bottom if (index = = myapplist.length-1) {return;} Swapitems (Myapplist, index,0, ' Down ');} To this JS operation Array moved to complete the following used in the Vue project inside
2. Vue operation table Move up and bottomProject requirements: Circular list is DD label, DD label to the right there are four small buttons from top to bottom function is: top, move up, move down, bottom
HTML code<template id= "myapplist" ><dd class= "Clearfix app applist" v-bind:appid= "Item.appid" v-for= "(Index, item) of Myapplist "><div class=" Dd-left "></div><div class=" Dd-right " >JS Code Remember to add the above package JS operation Array Move methodVue Loop App List page var myapplist=[];//get myapplist list function getmyapplist () {$.ajax ({URL: ' Your Own interface address ', 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 '),}}})})} The code is pretty simple. The AJAX request returns the JSON to take an array into the Vue code, as Vue in the HTML page v-for data source, the rest of the mobile function is to manipulate the data source this large array of sorts. There should be a similar approach in Vue, but I didn't find it, so I used the stupidest way. Reference: http://www.111cn.net/wy/js-ajax/80973.htm
JS Array move up down shift top bottom, vue implementation table up and down to move the bottom pinned
