问如何在单击向上和向下箭头按钮时向上和向下移动选定/多选数组元素？
EN

Stack Overflow用户

提问于 2018-08-20 01:53:53

回答 1查看 168关注 0票数 -1

如何在单击向上和向下箭头按钮时向上和向下移动选定/多选数组元素？

javascript或vuejs的答案最好是no-Jquery，谢谢。

示例：

var items = [
  {'type': 'fruit1', 'name': 'apple'},
  {'type': 'fruit2', 'name': 'banana'},
  {'type': 'fruit3', 'name': 'apple'},
  {'type': 'fruit4', 'name': 'cantaloupe'},
  {'type': 'fruit5', 'name': 'orange'},
  {'type': 'fruit6', 'name': 'grape'}
];

如果我选择{'type'：‘f果3’，'name'：'apple'}并点击向上箭头按钮

它应该向上移动一个位置

  {'type': 'fruit1', 'name': 'apple'},
  {'type': 'fruit3', 'name': 'apple'},
  {'type': 'fruit2', 'name': 'banana'},
  {'type': 'fruit4', 'name': 'cantaloupe'},
  {'type': 'fruit5', 'name': 'orange'},
  {'type': 'fruit6', 'name': 'grape'}

与一个位置向下箭头按钮相同，它应该向下移动一个位置。

如果我选择多个，它也应该向上移动一个位置，如下所示

从原始项目中选择

  {'type': 'fruit3', 'name': 'apple'},
  {'type': 'fruit4', 'name': 'cantaloupe'}

得到的数组应该是：

      {'type': 'fruit1', 'name': 'apple'},
      {'type': 'fruit3', 'name': 'apple'},
      {'type': 'fruit4', 'name': 'cantaloupe'},
      {'type': 'fruit2', 'name': 'banana'},
      {'type': 'fruit5', 'name': 'orange'},
      {'type': 'fruit6', 'name': 'grape'}

与多选相同，然后单击向下箭头

这里是fiddel https://jsfiddle.net/skesani/60au5yvs/

javascript