Vue——实现组件可拖拽

一、template

<div
        class="item"
        v-for="(item, index) in items"
        :key="index"
        draggable="true"
        @dragstart="handleDragStart($event, item)"
        @dragover.prevent="handleDragOver($event, item)"
        @dragenter="handleDragEnter($event, item)"
        @dragend="handleDragEnd($event, item)"
      >
        <Echarts
          @toParent="getEcharts"
          style="background:#fff"
          :chartHeight="'100%'"
          :chartWidth="'100%'"
          :option="item.option"
          :id="item.name"
        ></Echarts>//这个使用的是我之前封装的那个echarts组件
      </div>

一、script

import Echarts from '@/components/echarts';
export default {
   
  components: {
    Echarts, Tables },
  data() {
   
    return {
   
      items: [
        {
   
          title: '一',
          option: {
   },
          name: 'one'
        },
        {
   </