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

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

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

相关文章

基于android的 rk3399 同时支持多个USB摄像头

基于android的 rk3399 同时支持多个USB摄像头 一、前文二、CameraHal_Module.h三、CameraHal_Module.cpp四、编译&烧录Image五、App验证 一、前文 Android系统默认支持2个摄像头&#xff0c;一个前置摄像头&#xff0c;一个后置摄像头 需要支持数量更多的摄像头&#xff0…

selenium工作原理和反爬分析

一、 Selenium Selenium是最广泛使用的开源Web UI(用户界面)自动化测试套件之一&#xff0c;支持并行测试执行。Selenium通过使用特定于每种语言的驱动程序支持各种编程语言。Selenium支持的语言包括C#&#xff0c;Java&#xff0c;Perl&#xff0c;PHP&#xff0c;Python和Ru…

如何查看多开的逍遥模拟器的adb连接端口号

逍遥模拟器默认端口号为&#xff1a;21503。 不过&#xff0c;使用多开器多开的时候&#xff0c;端口就不一定是21503了。 如何查看&#xff1f; 进入G:\xiaoyao\Microvirt\MEmu\MemuHyperv VMs路径中 每多开一个模拟器&#xff0c;就会多出一个文件夹。 进入你要查找端口号…

2023年MathorCup高校数学建模挑战赛大数据挑战赛赛题浅析

比赛时长为期7天的妈杯大数据挑战赛如期开赛&#xff0c;为了帮助大家更好的选题&#xff0c;首先给大家带来赛题浅析&#xff0c;为了方便大家更好的选题。 赛道 A&#xff1a;基于计算机视觉的坑洼道路检测和识别 A题&#xff0c;图像处理类题目。这种题目的难度数模独一档…

SpringAOP源码解析之advice执行顺序(三)

上一章我们分析了Aspect中advice的排序为Around.class, Before.class, After.class, AfterReturning.class, AfterThrowing.class&#xff0c;然后advice真正的执行顺序是什么&#xff1f;多个Aspect之间的执行顺序又是什么&#xff1f;就是我们本章探讨的问题。 准备工作 既…

基于Python Django 的微博舆论、微博情感分析可视化系统(V2.0)

文章目录 1 简介2 意义3 技术栈Django 4 效果图微博首页情感分析关键词分析热门评论舆情预测 5 推荐阅读 1 简介 基于Python的微博舆论分析&#xff0c;微博情感分析可视化系统&#xff0c;项目后端分爬虫模块、数据分析模块、数据存储模块、业务逻辑模块组成。 Python基于微博…

第八节——Vue渲染列表+key作用

一、列表渲染 vue中使用v-for指令进行列表 <template><div><!-- item 代表 当前循环的每一项 --><!-- index 代表 当前循环的下标--><!-- 注意&#xff1a;必须要加key--><div v-for"(item, index) in arr" :key"index"…

UE5 Blueprint发送http请求

一、下载插件HttpBlueprint、Json Blueprint Utilities两个插件是互相依赖的&#xff0c;启用&#xff0c;重启项目 目前两个是Beta的状态&#xff0c;如果你使用的平台支持就可以使用&#xff0c;我们的项目因为需要取Header的值&#xff0c;所有没法使用这两个插件&#xff0…

DBeaver安装与使用教程(超详细安装与使用教程),好用免费的数据库管理工具

DBeaver安装步骤 资源下载&#xff1a; https://download.csdn.net/download/qq_37181642/88479235 官网地址&#xff1a; https://dbeaver.io/ 安装dbeaver 点击上图.exe安装工具&#xff0c;安装完成后不要打开 。 windows配置hosts 在hosts文件中加入&#xff1a; 127.0.0…

基于SSM民宿预订及个性化服务系统-计算机毕设 附源码 04846

SSM民宿预订及个性化服务系统 摘 要 伴随着国内旅游经济的迅猛发展民宿住宿行在国内也迎来了前所未有的发展机遇。传统的旅游模式已难以满足游客日益多元化的需求&#xff0c;随着人们外出度假的时间越来越长&#xff0c;导致人们在住宿的选择上更加追求舒适、个性化的住宿体验…

Kafka - 3.x 副本不完全指北

文章目录 kafka 副本的基本信息Leader选举过程Kafka Controllerkafka 分区副本Leader的选举流程实际演示① 查看first的详细信息&#xff0c;注意观察副本分布情况② 停掉hadoop103上的kafka进程③ 再次查看first的相信信息&#xff0c;观察副本分布④ 处理分区leader分布不均匀…

Spring Cloud之微服务

目录 微服务 微服务架构 微服务架构与单体架构 特点 框架 总结 SpringCloud 常用组件 与SpringBoot关系 版本 微服务 微服务&#xff1a;从字面上理解即&#xff1a;微小的服务&#xff1b; 微小&#xff1a;微服务体积小&#xff0c;复杂度低&#xff0c;一个微服…

网络协议--TCP:传输控制协议

17.1 引言 本章将介绍TCP为应用层提供的服务&#xff0c;以及TCP首部中的各个字段。随后的几章我们在了解TCP的工作过程中将对这些字段作详细介绍。 对TCP的介绍将由本章开始&#xff0c;并一直包括随后的7章。第18章描述如何建立和终止一个TCP连接&#xff0c;第19和第20章将…

macOS鼠标管理操作增强BetterMouse简体中文

BetterMouse是一款专为Mac用户设计的鼠标增强工具&#xff0c;旨在帮助用户更好地掌握和管理鼠标操作。它提供了全局鼠标手势、高度可定制的鼠标设置选项以及一些有用的鼠标增强功能&#xff0c;如鼠标放大镜、鼠标轨迹和应用程序切换功能。这些功能可以大大提高用户的工作效率…

HarmonyOS鸿蒙原生应用开发设计- 流转图标

HarmonyOS设计文档中&#xff0c;为大家提供了独特的流转图标&#xff0c;开发者可以根据需要直接引用。 开发者直接使用官方提供的流转图标内容&#xff0c;既可以符合HarmonyOS原生应用的开发上架运营规范&#xff0c;又可以防止使用别人的图标侵权意外情况等&#xff0c;减…

基于机器视觉的火车票识别系统 计算机竞赛

文章目录 0 前言1 课题意义课题难点&#xff1a; 2 实现方法2.1 图像预处理2.2 字符分割2.3 字符识别部分实现代码 3 实现效果最后 0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 基于机器视觉的火车票识别系统 该项目较为新颖&#xff0c;适合作为竞赛…

[蓝桥杯-610]分数

题面 解答 这一题如果不知道数论结论的话&#xff0c;做这个题会有两种天壤之别的体验 此题包含以下两个数论知识 1. 2^02^12^2...2^(n-1)2^n-1 2. 较大的数如果比较小的数的两倍大1或者小1&#xff0c;则两者互质 所以答案就是2^n-1/2^(n-1) 标程1 我的初次解答 #in…

【html】图片多矩形框裁剪

说明 由于项目中需要对一个图片进行多选择框进行裁剪&#xff0c;所以特写当前的示例代码。 代码 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><base href"/"><title>图片裁剪</tit…

【点云学习PCL 】一

点云学习 说明&#xff1a;仅做学习使用&#xff0c;侵删 参考网址1 一、点云基础 0 概述 PCL&#xff08;Point Cloud Library&#xff09;是用于 2D/3D 图像和点云处理的大型开源跨平台的 C 编程库&#xff0c;PCL 框架实现了大量点云相关的通用算法和高效的数据结构&…

基于XML的Web服务Java接口(JAX-WS)、Jakarta XML Web Services Eclipse 实现

简介 JAX-WS&#xff08;Java API for XML-Based Web Services&#xff09;&#xff0c;是创建web服务的Java编程接口&#xff0c;特别是SOAP服务。是Java XML编程接口之一&#xff0c;是Java SE 和Java EE 平台的一部分。 JAX-WS 2.0 规范是代替JAX-RPC 1.0的下一代Web服务AP…