vue自定义拖拽图像

<template>
    <div :draggable="true" @dragstart="onDrag($event, item)" @dragend="dragEnd(item)"></div>
</template>


<script>
    export default {
        data: () {
            return {
                item:{id: 1}
            }
        }
        methods: {
          onDrag (e, item) {
              const target = e.currentTarget
              const copyItem = target.cloneNode(true) // 复制拖拽的图像
              copyItem.style.position = 'absolute' // 隐藏复制的图像
              copyItem.style.left = '-1000px'
              let width = $(target).width()
              copyItem.style.width = (width > 300 ? 300 : width) + 'px' // 若超过300自定义图像失效
              copyItem.id = item.id + '-copy'
              document.body.appendChild(copyItem) // 插入复制的图像到dom
              e.dataTransfer.setDragImage(copyItem, 0, 0) // 自定义图像
          }
          dragEnd (item) { // 删除复制的dom
              document.body.removeChild(document.getElementById(item.id + '-copy'))
          }   
        }
    }
</script>