一、安装
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://www.toymoban.com/news/detail-718445.html
链接: https://blog.csdn.net/vvv3171071/article/details/122705408文章来源地址https://www.toymoban.com/news/detail-718445.html
到了这里，关于项目中拖拽元素，可以使用html的draggable属性，当然也可以用第三方插件interact的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
