Question

如何通过单击向上和向下箭头按钮来上下移动选定的/多选的数组元素？

请优先使用

javascript或vuejs答案。

示例：

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'：'fruit3'，'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'}

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

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

Answer 1

如果您使用的是Vue.js，则可以使用这些出色的库中的任何一个

https://github.com/sagalbot/vue-select

https://github.com/shentao/vue-multiselect

他们俩都能做您想做的事

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

1 个答案: