how do I move up and down an selected/ multi-selected array element/s on click up and down arrow buttons?

Question

how do I move up and down an selected/ multi-selected array element/s on click up and down arrow buttons?

javascript or vuejs answers is preferred no-Jquery, please.

Example:

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'}
];

if I select {'type': 'fruit3', 'name': 'apple'} and click on up arrow button

it should move one position up

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

same as one position down arrow button it should move one position down.

If I select multiple it should move one position up as well like below

selected from original items

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

the resulted array should be:

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

same as multi-select and click on down arrow

Here is fiddel https://jsfiddle.net/skesani/60au5yvs/

Answer 1

If you are using Vue.js you can use any of these excellent libraries

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

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

They both do what you want and much more