当前位置:首页 > 编程笔记 > 正文
已解决

项目中拖拽元素,可以使用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%的人还看了

猜你感兴趣

版权申明

本文"项目中拖拽元素,可以使用html的draggable属性,当然也可以用第三方插件interact":http://eshow365.cn/6-27198-0.html 内容来自互联网,请自行判断内容的正确性。如有侵权请联系我们,立即删除!