已解决
项目中拖拽元素,可以使用html的draggable属性,当然也可以用第三方插件interact
来自网友在路上 173873提问 提问时间:2023-10-28 23:51:38阅读次数: 73
最佳答案 问答题库738位专家为你答疑解惑
项目中拖拽元素,可以使用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.targetconst x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dxconst y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dytarget.style.transform = `translate(${x}px, ${y}px)`target.setAttribute('data-x', x)target.setAttribute('data-y', y)},})},
html的draggable属性需要自己写逻辑,用人家封装好的代码简单逻辑清楚,非常香
链接: https://blog.csdn.net/vvv3171071/article/details/122705408
查看全文
99%的人还看了
相似问题
- Android 13.0 Launcher3仿ios长按app图标实现抖动动画开始拖拽停止动画
- ElementUI-tree拖拽功能与节点自定义
- 案例 - 拖拽上传文件,生成缩略图
- react使用react-sortable-hoc实现拖拽
- vue3+element Plus实现弹框的拖拽、可点击底层页面功能
- 【UE】从UI中拖拽生成物体
- 项目中拖拽元素,可以使用html的draggable属性,当然也可以用第三方插件interact
- vmware17.0|ubuntu22.04.0 解决灰色Vmware Tool 无法重新安装和 无法和win11相互拖拽文件问题
- Android View拖拽/拖放DragAndDrop自定义View.DragShadowBuilder,Kotlin(2)
- vue3 elementPlus 表格实现行列拖拽及列检索功能
猜你感兴趣
版权申明
本文"项目中拖拽元素,可以使用html的draggable属性,当然也可以用第三方插件interact":http://eshow365.cn/6-27198-0.html 内容来自互联网,请自行判断内容的正确性。如有侵权请联系我们,立即删除!