js实现上移、下移、置顶、置底功能

1.使用数组splice方法交换位置实现上移、下移功能
2.使用数组splice、unshift、push方法实现置顶、置底功能

splice(index, num,item1,...,itemN):
index：添加/删除元素的位置
num：要删除元素的数量
item1,...,itemN：向数组添加新的元素

以下代码中的list为一个数组，index为list中一个元素的序号

• 上移、下移

      // 调整顺序，arr 数组，indexAdd 添加元素的位置，indexDel 删除元素的位置（indexAdd与indexDel交换位置）
      handleChangeOrder(arr, indexAdd, indexDel) {
        arr[indexAdd] = arr.splice(indexDel, 1, arr[indexAdd])[0]
        return arr
      }
      // 上移，与前一个元素交换顺序
      handleUp(index) {
        if (index - 1 >= 0) {
          handleChangeOrder(list, index, index - 1)
        } else {
          alert('素材已经置顶，无法上移！')
        }
      }
      // 下移，与后一个元素交换顺序
      handleDown(index) {
        if (index + 1 < list.length) {
          handleChangeOrder(list, index, index + 1)
        } else {
          alert('素材已经置底，无法下移！)
        }
      }

• 置顶

  // 置顶
      handleTop(index) {
        if (index - 1 >= 0) {
          // 将要置顶的元素存储后删除
          const temp = list.splice(index, 1)[0]
          // 将元素unshift到数组第一位
          list.unshift(temp)
        } else {
          alert('素材已经置顶！)
        }
      }

• 置底

// 置底
      handleBottom(index) {
        if (index + 1 < list.length) {
          // 将要置底的元素存储后删除
          const temp = list.splice(index, 1)[0]
          // 将元素push到数组最后一位
          list.push(temp)
        } else {
          alert('素材已经置底！)
        }
      }