项目中拖拽元素，可以使用html的draggable属性，当然也可以用第三方插件interact

一、安装

npm install interactjs

二、引用

import interact from 'interactjs'

三、使用

<div class="drag_box">              
     <img src="../../assets/images/smallHand.png" class="smallHand" alt="" />
</div>

this.makeIframeDraggable() //拖拽页面初始化
  
 //拖拽页面
makeIframeDraggable() {
     interact('.drag_box').draggable({
         onmove: event => {
             const target = event.target
             const x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx
             const y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy

             target.style.transform = `translate(${x}px, ${y}px)`
             target.setAttribute('data-x', x)
             target.setAttribute('data-y', y)
         },
     })
 },

html的draggable属性需要自己写逻辑，用人家封装好的代码简单逻辑清楚，非常香

链接: https://blog.youkuaiyun.com/vvv3171071/article/details/122705408