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

news2025/1/13 15:44:06

项目中拖拽元素,可以使用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

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Linux虚拟网络设备—Veth Pair

veth是Virtual Ethernet Device的缩写&#xff0c;是一种成对出现的Linux虚拟网络接口设备。它最常用的功能是用于将不同的Linux network namespaces 命名空间网络连接起来&#xff0c;让二个namespaces之间可以进行通信。我们可以简单的把veth pair理解为用一根网线&#xff0…

2023年【加氢工艺】免费试题及加氢工艺在线考试

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 加氢工艺免费试题考前必练&#xff01;安全生产模拟考试一点通每个月更新加氢工艺在线考试题目及答案&#xff01;多做几遍&#xff0c;其实通过加氢工艺在线考试很简单。 1、【单选题】《中华人民共和国职业病防治法…

ES6初步了解Symbol的用法

ES6中为我们新增了一个原始数据类型Symbol&#xff0c;让我为大家介绍一下吧&#xff01; Symbol它表示是独一无二的值 Symbol要如何创建 第一种创建方式&#xff1a; let sy Symbol()第二种创建方式&#xff1a; let sy Symbol.for()具体独一无二在哪呢&#xff1f;它们的地…

阻抗导纳控制理解

书籍《Modern Robotics - Mechanics , Planning, and Control》中关于阻抗控制和导纳控制的部分&#xff1a; 下面结合上边的内容谈一谈我对导纳控制的理解。 1、质量-弹簧-阻尼 首先&#xff0c;不论是阻抗控制&#xff0c;还是导纳控制&#xff0c;他们同根同源&am…

计算机网络_03_tcp/ip四层模型

文章目录 1.为什么会有tcp/ip?2.tcp/ip是什么?3.为什么会有tcp/ip四层模型?4.tcp/ip四层模型介绍 1.为什么会有tcp/ip? 早期的计算机(计算机网络没有出现之前)几乎都是各自为战, 各种操作系统厂家百花齐放, 市面上的大部分计算机使用的都是不同的操作系统, 为每个人提供定…

【rk3568-linux】 rk3568x_linux-- 编译说明

概述 一个好的安装教程能够帮助开发者完成更便捷、更快速的开发。书山有路勤为径&#xff0c;学海无涯苦作舟。我是秋知叶i、期望每一个阅读了我的文章的开发者都能够有所成长。 开发环境 开发环境&#xff1a;ubuntu18 文章目录 概述开发环境一、选择型号二、全自动编译三、…

基于蜉蝣算法的无人机航迹规划-附代码

基于蜉蝣算法的无人机航迹规划 文章目录 基于蜉蝣算法的无人机航迹规划1.蜉蝣搜索算法2.无人机飞行环境建模3.无人机航迹规划建模4.实验结果4.1地图创建4.2 航迹规划 5.参考文献6.Matlab代码 摘要&#xff1a;本文主要介绍利用蜉蝣算法来优化无人机航迹规划。 1.蜉蝣搜索算法 …

一个工作三年的前端是如何做性能优化的

你是怎么做性能优化的&#xff1f;关于这一个问题&#xff0c;也是我们前端开发程序员经常会讨论到的问题&#xff0c;接下来这篇文章将总结一下前端方面的性能优化及方式。 为什么要做性能优化 性能优化是为了提高网页的加载速度和相应速度&#xff0c;给用户带来更好的体验…

asp.net在线考评系统VS开发sqlserver数据库web结构c#编程Microsoft Visual Studio

一、源码特点 asp.net在线考评系统是一套完善的web设计管理系统&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模式开发。开发环境为vs2010&#xff0c;数据库为sqlserver2008&#xff0c;使用c#语言开发 asp.net 在线考评系统 二、功能介绍 本…

Python自动处理pptx:新建、另存、添加幻灯片、添加标题、插入文本图片图形、提取文本

Python-pptx库是一个用于创建、更新和读取Microsoft PowerPoint .pptx 文件的Python库。它允许我们使用Python脚本自动化PowerPoint文件的创建、更新和读取操作&#xff0c;是一个非常方便自动化处理PPTX的工具。 安装 pip install python-pptx创建 from pptx import Prese…

记一次公司项目上的常规渗透测试

授权项目上的渗透测试&#xff0c;漏洞有网站弱口令—存储型XSS—文件上传。 前言 本文由知识星球《网络安全情报攻防站》星友堂主投稿&#xff0c;感谢投稿。授权项目下常规的渗透测试。欢迎朋友们积极投稿&#xff0c;投稿有奖励。天冷了来领奶茶钱 正文 网站首页 首页啥都没…

前端koa搭建服务器(保姆级教程)——part1

目录 koa简介前端项目搭建koa环境第一步&#xff1a;新建项目第二步&#xff1a;环境初始化&#xff0c;安装依赖初始化项目&#xff0c;生成package.json文件安装koa依赖安装koa-router 路由管理依赖安装dotenv 环境变量依赖安装nodemon 热启动依赖 第三步&#xff1a;代码调用…

黄金代理这么多,怎么选?

目前&#xff0c;现货黄金代理已成为了市场中成熟的模式&#xff0c;我们只要在搜索引擎上搜索如何在市场中开户&#xff0c;会搜到各种各样的黄金代理&#xff0c;其中更是不乏服务非常优秀的。部分投资者早就接受了黄金代理的存在&#xff0c;并且率先开始在黄金代理中进行开…

【单调栈】503. 下一个更大元素 II、42. 接雨水

提示&#xff1a;努力生活&#xff0c;开心、快乐的一天 文章目录 503. 下一个更大元素 II&#x1f4a1;解题思路&#x1f914;遇到的问题&#x1f4bb;代码实现&#x1f3af;题目总结 42. 接雨水&#x1f4a1;解题思路&#x1f914;遇到的问题&#x1f4bb;代码实现&#x1f3…

反射Java

反射是获取摸个类的所有对象 构造器 &#xff1a;成员变量&#xff1a; 成员方法 获取方式 package Reflect;//获取class类的对象public class Test1Clacc {public static void main(String[] args)throws Exception {Class c1Student.class;System.out.println(c1.getName(…

神奇代码备份恢复工具逸事与操作指南

文章目录 一&#xff0c;序二&#xff0c;逸事三&#xff0c;为什么今天要提这个工具四&#xff0c;操作界面1. 文章发表者备份项目步骤2. 文章发表者恢复项目操作步骤3. 文章阅读者恢复项目步骤 五&#xff0c;附件1. 示例备份文件2. 神奇代码备份恢复工具源码备份 一&#xf…

淘宝商品详情API接口(标题|主图|SKU|价格|商品销量)

Taobao.item_get-获得淘宝商品详情接口&#xff0c;淘宝商品详情数据接口是淘宝开放平台提供的一种API接口&#xff0c;通过调用该接口&#xff0c;可以获取淘宝商品详情信息。该接口支持多种编程语言&#xff0c;包括Java、PHP、Python等。在使用淘宝商品详情API接口时&#x…

你知道有哪些好用的数据分析工具类软件?

前言 俗话说&#xff0c;工欲善其事&#xff0c;必先利其器。工匠想要使他的工作做好&#xff0c;一定要先让工具锋利。比喻要做好一件事&#xff0c;准备工具非常重要。对于数据分析人员来说是一样的&#xff0c;想要提高工作效率&#xff0c;也需要选择好自己的工具&#xf…

2023年中国监控光端机优点、市场规模及发展前景分析[图]

监控光端机是一种用于光纤通信网络的设备&#xff0c;用于连接光纤到用户设备&#xff08;如计算机、路由器等&#xff09;。监控光端机行业涉及制造、销售和维护这些设备&#xff0c;以确保高速、稳定的光纤通信连接&#xff0c;适用于家庭、企业和数据中心等不同应用场景。 …

vue项目中调用Google自带右下角弹框

vue项目中使用Google右下角弹框 一、效果二、代码 一、效果 二、代码 google浏览器要在设置通知权限开启 // Google消息提示googleNewsTip() {// 请求用户授权显示通知Notification.requestPermission().then(function (permission) {if (permission granted) {// 创建新的通知…