drag.js

<template>>
  <div id="app">
    {{ dragging }} 'Avenir', Helvetica, Arial, sans-serif;
    <ul @dragover="dragover" @drop="drop">
      <li v-for="id in idsLists[0]" @dragenter="dragenter" :key="id" :id="id" draggable="true" @dragstart="dragstart">
        {{ items[id].name }}
      </li>: #2c3e50;
    </ul>gin-top: 60px;
  8 }
    <ul @dragover="dragover" @drop="drop">
      <li v-for="id in idsLists[1]" @dragenter="dragenter" :key="id" :id="id" draggable="true" @dragstart="dragstart">
        {{ items[id].name }}
      </li>r: 10px solid lightblue;
    </ul>t-style-type: none;
  </div>dding: 0;
</template>
65
<script>
export default {x solid grey;
  name: 'app', 10px;
  data () {
    return {
      idsLists: [
        [0, 1, 2, 3],
        [4, 5, 6, 7]
      ],yle>
      items: {
        '0': { 'name': 'zero', list: 0 },
        '1': { 'name': 'one', list: 0 },00
        '2': { 'name': 'two', list: 0 },
        '3': { 'name': 'three', list: 0 },
        '4': { 'name': 'four', list: 1 },
        '5': { 'name': 'five', list: 1 },
        '6': { 'name': 'six', list: 1 },
        '7': { 'name': 'seven', list: 1 }
      },
      dragging: null
    }
  },

  methods: {
    dragenter (e) {
      let targetId = e.target.id
      if (targetId !== this.dragging) {
        if (this.items[targetId].list === this.items[this.dragging].list) {
          let list = this.items[targetId].list
          let target = parseInt(targetId)
          let goal = parseInt(this.dragging)

          let pre = this.idsLists[list].indexOf(target)
          let nxt = this.idsLists[list].indexOf(goal)

          this.idsLists[list].splice(pre, 1, goal)
          this.idsLists[list].splice(nxt, 1, target)
        }
      }
    },

    dragover (e) {
      e.preventDefault()
      // console.log('Dragover', e)
    },

    drop (e) {
      e.preventDefault()
      console.log('drop', this.dragging, e.target.id)
      if (this.items[this.dragging].list !== this.items[e.target.id].list) {
        // initial list index
        let list = this.idsLists[this.items[this.dragging].list]
        let newList = this.idsLists[this.items[e.target.id].list]

        let index = list.indexOf(parseInt(this.dragging))
        let newIndex = newList.indexOf(parseInt(e.target.id))
        list.splice(index, 1)
        newList.splice(newIndex, 0, this.dragging)

        //this.idsLists[this.items[this.dragging].list].splice()
      }
    },

    dragstart (e) {
      this.dragging = e.target.id
      e.dataTransfer.dropEffect = 'move'
      e.dataTransfer['id'] = e.target.id
    }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

ul {
  margin: 10px;
  border: 10px solid lightblue;
  list-style-type: none;
  padding: 0;
}

li {
  border: 1px solid grey;
  padding: 10px;
}

a {
  color: #42b983;
}
</style>

Press