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

项目中拖拽元素,可以使用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.csdn.net/vvv3171071/article/details/122705408

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/104714.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

如何公网远程连接本地群晖NAS中的WebDAV

文章目录 1. 在群晖套件中心安装WebDav Server套件1.1 安装完成后&#xff0c;启动webdav服务&#xff0c;并勾选HTTP复选框 2. 局域网测试WebDav服务2.1 下载RaiDrive客户端2.2 打开RaiDrive&#xff0c;设置界面语言可以选择中文2.3 点击添加按钮&#xff0c;新建虚拟驱动区2…

品牌媒介工作流程是什么,媒体投放目标怎么做?

品牌媒介其实说简单也很简单&#xff0c;说难也很难&#xff0c;简单在于其实事情流程简洁&#xff0c;难呢&#xff0c;在于很多东西如果不亲身体验是无法领悟到精髓的。今天为大家分享下品牌媒介工作流程是什么&#xff0c;媒体投放目标怎么做&#xff1f; 我们怎么才能在媒体…

2023年腾讯云双11活动云服务器价格表

2023年腾讯云双11活动已经拉开了序幕&#xff0c;腾讯云推出了一系列的优惠活动&#xff0c;下面给大家分享腾讯云双11活动云服务器价格表&#xff0c;对于有需要购买云服务器的用户来说&#xff0c;无疑是一份非常有价值的参考。 一、腾讯云双十一活动入口 活动入口&#xff…

2021-arXiv-The Power of Scale for Parameter-Efficient Prompt Tuning

2021-arXiv-The Power of Scale for Parameter-Efficient Prompt Tuning Paper: https://arxiv.org/abs/2104.08691 Code: https://github.com/google-research/ text-to-text-transfer-transformer/ blob/main/released_checkpoints.md# lm-adapted-t511lm100k 在这项工作中&…

14、Python -- 列表推导式(for表达式)与控制循环

目录 for表达式&#xff08;列表推导式&#xff09;列表推导式的说明使用break跳出循环使用continue忽略本次循环使用return结束函数 列表推导式 使用break跳出循环 使用continue忽略本次循环 for表达式&#xff08;列表推导式&#xff09; for表达式用于利用其他区间、元组、…

Telegram 引入了国产小程序容器技术

Telegram 宣布为其开发者提供了一项“能够在 App 中运行迷你应用”的新功能&#xff08; 迷你应用即 Mini App&#xff0c;下文中以“小程序”代替&#xff09;。 在一篇博客文章中&#xff0c;Telegram 的开发者写到“小程序提供了可替代互联网网站的灵活界面&#xff08;cre…

uni-app:解决异步请求返回值问题

可以使用 Promise 或者回调函数来处理异步请求的返回值。 方法一&#xff1a; Promise处理异步请求的返回值 使用 Promise 可以将异步请求的结果通过 resolve 和 reject 返回&#xff0c;然后通过 .then() 方法获取成功的结果&#xff0c;通过 .catch() 方法获取错误信息。 …

服务器中了360后缀勒索病毒怎么解决,勒索病毒解密,数据恢复

近期&#xff0c;网络上的各种病毒都比较猖獗&#xff0c;而其中较为明显的就是360后缀勒索病毒&#xff0c;从这个月开始云天数据恢复中心接到很多企业的求助&#xff0c;企业的服务器遭到了360后缀勒索病毒的攻击&#xff0c;通过给用户的服务器检测与加密病毒的分析&#xf…

财务RPA机器人真的能提高效率吗?

财务部门作为一个公司的管理职能部门承担着一个公司在商业活动中各个方面的重要职责。理论上来说&#xff0c;一个公司的财务部门的实际工作包含但不限于对企业的盈亏情况进行评估、对风险进行预测、通过数据分析把握好公司的财务状况、税务管理等。 然而&#xff0c;实际上在…

内网穿透的应用-Linux JumpServer堡垒机:安全远程访问解决方案

文章目录 前言1. 安装Jump server2. 本地访问jump server3. 安装 cpolar内网穿透软件4. 配置Jump server公网访问地址5. 公网远程访问Jump server6. 固定Jump server公网地址 前言 JumpServer 是广受欢迎的开源堡垒机&#xff0c;是符合 4A 规范的专业运维安全审计系统。JumpS…

二、W5100S/W5500+RP2040树莓派Pico<DHCP>

文章目录 1 前言2 简介2 .1 什么是DHCP&#xff1f;2.2 为什么要使用DHCP&#xff1f;2.3 DHCP工作原理2.4 DHCP应用场景 3 WIZnet以太网芯片4 DHCP网络设置示例概述以及使用4.1 流程图4.2 准备工作核心4.3 连接方式4.4 主要代码概述4.5 结果演示 5 注意事项6 相关链接 1 前言 …

初识Java 16-1 字符串

目录 字符串的常量和变量 不变的String常量 String变量 重载的和更快的StringBuilder 容易忽略的递归现象 对字符串的操作 格式化输出 System.out.format() Formatter类 格式说明符 Formatter转换 String.format() 新特性&#xff1a;文本块 本笔记参考自&#xff…

【Django restframework】django跨域问题,解决PUT/PATCH/DELETE用ajax请求无法提交数据的问题

【Django restframework】django跨域问题&#xff0c;解决PUT/PATCH/DELETE用ajax请求无法提交数据的问题 1 问题描述&#xff1a; 我用restframework(ModelSerializerGenericApiView)开发了一组符合RestFul接口标准的接口&#xff0c;这意味着它将支持客户端发来的GET、POST、…

【分布式技术专题】「分布式技术架构」MySQL数据同步到Elasticsearch之N种方案解析,实现高效数据同步

MySQL数据同步到Elasticsearch之N种方案解析&#xff0c;实现高效数据同步 前提介绍MySQL和ElasticSearch的同步双写优点缺点针对于缺点补充优化方案 MySQL和ElasticSearch的异步双写优点缺点 定时延时写入ElasticSearch数据库机制优点缺点 开源和成熟的数据迁移工具选型Logsta…

【SwiftUI模块】0060、SwiftUI基于Firebase搭建一个类似InstagramApp 2/7部分-搭建TabBar

SwiftUI模块系列 - 已更新60篇 SwiftUI项目 - 已更新5个项目 往期Demo源码下载 技术:SwiftUI、SwiftUI4.0、Instagram、Firebase 运行环境: SwiftUI4.0 Xcode14 MacOS12.6 iPhone Simulator iPhone 14 Pro Max SwiftUI基于Firebase搭建一个类似InstagramApp 2/7部分-搭建Tab…

企业财务数字化转型怎么才能落地?_光点科技

企业财务数字化转型一直是企业发展中的一个重要议题。在当今数字化的时代&#xff0c;将财务流程纳入数字化转型计划中&#xff0c;不仅能够提高工作效率&#xff0c;还能为企业带来更多的商业机会。那么&#xff0c;企业财务数字化转型如何才能真正落地呢&#xff1f; 企业需要…

Java设计模式大揭秘,细致剖析5种经典模式

public class SingletonClass {private static SingletonClass instance;private SingletonClass() {// 私有构造函数&#xff0c;防止外部实例化}public static SingletonClass getInstance() {if (instance null) {instance new SingletonClass();}return instance;} }如下…

【机器学习合集】深度学习模型优化方法最优化问题合集 ->(个人学习记录笔记)

文章目录 最优化1. 最优化目标1.1 凸函数&凹函数1.2 鞍点1.3 学习率 2. 常见的深度学习模型优化方法2.1 随机梯度下降法2.2 动量法(Momentum)2.3 Nesterov accelerated gradient法(NAG)2.4 Adagrad法2.5 Adadelta与Rmsprop法2.6 Adam法2.7 Adam算法的改进 3. SGD的改进算法…

共享购模式:重新定义电商购物体验

在当今的电商市场&#xff0c;消费者对购物体验的需求日益增长&#xff0c;他们不再满足于传统的电商模式。为此&#xff0c;共享购模式应运而生&#xff0c;这种创新模式将线下实体商业与线上虚拟商城相结合&#xff0c;为用户带来全新的购物体验。本文将详细讲解共享购模式的…

云游数智农业世界,体验北斗时空智能

今日&#xff0c;2023年中国国际农业机械展览会在武汉正式拉开帷幕&#xff0c;众多与会者云集&#xff0c;各类农机产品纷呈&#xff0c;盛况空前。 千寻位置作为国家北斗地基增强系统的建设与运营方&#xff0c;在中国国际农业机械展览会上亮相&#xff0c;以「北斗时空智能 …