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

news/2025/1/18 11:04:26/

项目中拖拽元素,可以使用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.ppmy.cn/news/1173453.html

相关文章

浅谈uniapp中开发安卓原生插件

其实官方文档介绍的比较清楚而且详细,但是有时候他太墨迹,你一下子找不到自己想要的,所以我总结了一下开发的提纲,也是为了自己方便下次使用。 1.第一步,下载官方提供的Android的示例工程,然后倒入UniPlugin-Hello-AS工程请在App离线SDK中查找,之后Android studio,编译运行项目…

批量编辑 Outlook 联系人

现状 Outlook 自带的联系人编辑功能无法快速、批量编辑联系人字段使用 Excel 等外部编辑器&#xff0c;可批量编辑联系人 导出联系人到文件 在【联系人】界面&#xff0c;点击【文件】在【文件】界面&#xff0c;点击【打开和导出】–>【导入/导出】在弹出的向导窗口中点…

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

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

Alexon:在云原生环境中快速部署应用服务

Alexon是一个旨在快速部署WEB应用服务到分布式系统中的工具&#xff0c;适用于云原生环境。 Alexon由SymeCloud Limited(syme.dev) 发布&#xff0c;使用GNU Guile编写而成&#xff0c;支持函数编程概念。 SymeCloud 公司主要致力于 AI-Infra 方面的研发&#xff0c;从 OpenAI …

vue部署,chunk文件有部分404,解决方案

排查方案&#xff1a; 1&#xff0c;检查项目配置&#xff0c;再vue.config.js里面配置 publicPath: "./",2&#xff0c;打包后检查报错文件是否存在打包目录 3&#xff0c;如果1,2都有 找到部署后404的文件&#xff0c;查看是否为空文件 style里面全注释也会打包文…

Ubuntu 安装 kubectl、kubeadm 和 kubelet

你需要在每台机器上安装以下的软件包&#xff1a; kubeadm&#xff1a;用来初始化集群的指令。 kubelet&#xff1a;在集群中的每个节点上用来启动 Pod 和容器等。 kubectl&#xff1a;用来与集群通信的命令行工具。 kubeadm 不能帮你安装或者管理 kubelet 或 kubectl&#…

最高效快速的查找论文的方法

1.登录完学校的图书馆各个数据库的账号后&#xff0c;直接在bing搜论文的名字就可以了 2.直接在谷歌学术搜论文名字也很方便

基于大数据的股票量化分析与股价预测系统 计算机竞赛

文章目录 0 前言1 课题背景2 实现效果3 设计原理QTChartsarma模型预测K-means聚类算法算法实现关键问题说明 4 部分核心代码5 最后 0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; 基于大数据的股票量化分析与股价预测系统 该项目较为新颖…