vue中盒子拖动

下载第三方插件

npm install vuedraggable

代码

<template>
  <div>
    <draggable v-model="list" @start="drag=true" @end="drag=false">
      <div v-for="item in list" :key="item.id">
        {{ item.name }}
      </div>
    </draggable>
  </div>
</template>

<script>
import draggable from 'vuedraggable';
 
export default {
  components: {
    draggable
  },
  data() {
    return {
      list: [
        { id: 1, name: 'Box 1' },
        { id: 2, name: 'Box 2' },
        { id: 3, name: 'Box 3' },
        // ...
      ],
      drag: false
    };
  }
};
</script>