当前位置： 首页 > news >正文

javaScript：拖拽效果

news 2026/3/31 17:04:10

目录

前言

实现思路 

获取事件对象和坐标点：

配合定位：

鼠标事件监听：

拖拽过程：

停止拖拽：

代码实现（代码讲解）

前言

JavaScript的拖拽效果是一种常见的交互技术，它允许用户通过鼠标操作在网页中拖拽（拖动）元素。这种技术可以为网站和应用程序带来多种用途和好处，如：增强用户体验，实现拖放功能，图形设计和游戏，排序和重新排列，数据可视化，创建可自定义界面等等。总之，JavaScript的拖拽效果是一种强大的交互技术，可以提高用户体验、增加网站或应用程序的功能性，并创造更富有创意和直观的用户界面。

实现思路 

  1. 获取事件对象和坐标点：

    • 当鼠标按下时，触发 mousedown 事件。
    • 在 mousedown 事件处理程序中，可以使用事件对象来获取鼠标点击的坐标点，通常使用 event.clientX 和 event.clientY 属性来获取鼠标相对于视窗的坐标点。

  2. 配合定位：

    • 要实现拖拽效果，通常需要操作被拖拽的元素的位置。这可以通过设置元素的 style.left 和 style.top 属性来实现。
    • 在 mousedown 事件处理程序中，可以记录鼠标点击时元素的初始位置（通常是元素的左上角坐标）。

  3. 鼠标事件监听：

    • 在 mousedown 事件中，将鼠标的 mousemove 和 mouseup 事件监听器附加到 document 上。这是因为当用户按住鼠标拖动元素时，鼠标可能会离开元素，但我们仍然要捕获移动和释放事件。

  4. 拖拽过程：

    • 在 mousemove 事件处理程序中，计算鼠标移动的距离（新坐标点与初始坐标点之间的差值）。
    • 使用这个差值来更新元素的位置，将初始位置坐标与差值相加，并将结果分别赋给 style.left 和 style.top。
    • 这样，元素将跟随鼠标的移动而移动。

  5. 停止拖拽：

    • 当用户释放鼠标按钮时，触发 mouseup 事件。
    • 在 mouseup 事件处理程序中，移除 mousemove 和 mouseup 事件监听器，以停止拖拽操作。

代码实现（代码讲解）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>拖拽效果</title><style>* {margin: 0;padding: 0;}.wp {width: 200px;height: 200px;background: #04be02;position: absolute;left: 100px;top: 100px;}</style>
</head>
<body><div class="wp"></div>
</body>
</html>
<script>
// 获取拖拽元素
let wp = document.querySelector('.wp')// 当鼠标按下时
wp.onmousedown = function(){// 计算鼠标点击点距离元素左边和上边的距离let diX = event.clientX - wp.offsetLeft;let diY = event.clientY - wp.offsetTop;console.log(diX,diY);// 在文档上添加鼠标移动事件监听器document.onmousemove = function(){// 计算元素新的左上角坐标let oLeft = event.clientX - diX;let oTop = event.clientY - diY;// 限制元素不超出页面边界if (oLeft <= 0) {oLeft = 0;}if (oTop <= 0) {oTop = 0;}let maxLeft = window.innerWidth - wp.offsetWidth;let maxTop = window.innerHeight - wp.offsetHeight;if (oLeft >= maxLeft) {oLeft = maxLeft;}if (oTop >= maxTop) {oTop = maxTop;}// 设置元素的定位位置wp.style.left = oLeft + 'px';wp.style.top = oTop + 'px';}
}// 当鼠标释放时，移除鼠标移动事件监听器，停止拖拽
document.onmouseup = function(){document.onmousemove = null;
}
</script>

相关文章：

javaScript：拖拽效果

目录 前言 实现思路 获取事件对象和坐标点&#xff1a; 配合定位&#xff1a; 鼠标事件监听&#xff1a; 拖拽过程&#xff1a; 停止拖拽&#xff1a; 代码实现&#xff08;代码讲解&#xff09; 前言 JavaScript的拖拽效果是一种常见的交互技术&#xff0c;它允许用户…...

编程日记 2023/10/13 2:47:23

【Unity3D编辑器开发】Unity3D中制作一个可以随时查看键盘对应KeyCode值面板，方便开发

推荐阅读 CSDN主页GitHub开源地址Unity3D插件分享简书地址我的个人博客 大家好&#xff0c;我是佛系工程师☆恬静的小魔龙☆&#xff0c;不定时更新Unity开发技巧&#xff0c;觉得有用记得一键三连哦。 一、前言 在开发中&#xff0c;会遇到要使用监控键盘输入的KeyCode值来执…...

编程日记 2023/10/13 2:45:21

VUE echarts 柱状图、折线图 双Y轴 显示

weekData: [“1周”,“2周”,“3周”,“4周”,“5周”,“6周”,“7周”,“8周”,“9周”,“10周”], //柱状图横轴 jdslData: [150, 220, 430, 360, 450, 680, 100, 450, 680, 200], // 折线图的数据 cyslData: [100, 200, 400, 300, 500, 500, 500, 450, 480, 400], // 柱状图…...

编程日记 2023/10/13 2:43:18

Django开发之基础篇

Django基础篇 一、Django学习之路由二、Django学习之视图三、Django学习之静态资源 一、Django学习之路由 在 Django 中&#xff0c;路由&#xff08;URL 映射&#xff09;是将请求与视图函数关联起来的关键部分。路由定义了如何将特定的 URL 请求映射到 Django 应用程序中的视…...

编程日记 2023/10/13 2:42:15

在 centos7 上安装Docker

1、检查linux内核 Docker 运行在 CentOS 7 上&#xff0c;要求系统为64位、系统内核版本为 3.10 以上。 Docker 运行在 CentOS-6.5 或更高的版本的 CentOS 上&#xff0c;要求系统为64位、系统内核版本为 2.6.32-431 或者更高版本。 uname -r 2、使用 root 权限登录 Centos…...

编程日记 2023/10/13 2:41:12

基于SpringBoot的大学城水电管理系统

目录 前言 一、技术栈 二、系统功能介绍 管理员模块的实现 领用设备管理 消耗设备管理 设备申请管理 状态汇报管理 用户模块的实现 设备申请 状态汇报 用户反馈 三、核心代码 1、登录模块 2、文件上传模块 3、代码封装 前言 随着信息技术在管理上越来越深入而广泛…...

编程日记 2023/10/13 2:40:10

微信小程序 movable-view 控制长按才触发拖动 轻轻滑动页面正常滚动效果

今天写 movable-areamovable-view遇到了个头疼的问题 那就是 movable-view 监听了用户拖拽自己 但 我们小程序 上下滚动页面靠的也是拖拽 也就是说 如果放在这里 用户拖动 movable-view部分 就会永远触发不了滚动 那么 我们先可以 加一个 bindlongpress"longpressHandler…...

编程日记 2023/10/13 2:39:08

mysql面试题27：数据库中间件了解过吗？什么是sharding jdbc、mycat，并且讲讲怎么使用？

该文章专注于面试，面试只要回答关键点即可，不需要对框架有非常深入的回答，如果你想应付面试，是足够了，抓住关键点 面试官：数据库中间件了解过吗，比如sharding jdbc、mycat？ 我知道的数据库中间件有以下这些： MySQL Proxy：MySQL Proxy是一个开源的数据库中间件，它位…...

编程日记 2023/10/13 2:36:03

DBCO Sata650，二苯并环辛烷Sata650，Seta-650-DBCO

产品简介&#xff1a; CAS号&#xff1a;N/A 中文名&#xff1a;二苯并环辛烷Sata650 英文名&#xff1a;DBCO Sata650,Seta-650-DBCO 化学式&#xff1a;N/A 分子量&#xff1a;1431.85 纯度标准&#xff1a;95% 供应商&#xff1a;陕西新研博美生物科技有限公司 存储…...

编程日记 2023/10/13 2:35:01

JFLASH基本使用总结

注意&#xff0c;不同版本的操作略有不同&#xff0c;本教程以J-Flash V5.12f为例。 烧录文件 如果是刚打开J-Flash&#xff0c;会弹出这样的一个工程选择界面&#xff0c;可以选择已有工程&#xff0c;或者创建新的工程&#xff0c;我们这里选择创建新工程。 注意&#xff0…...

编程日记 2023/10/13 2:34:00

具身智能（Embodied AI）

前言 图灵奖得主、上海期智研究院院长姚期智认为&#xff0c;人工智能领域下一个挑战将是实现“具身通用人工智能”&#xff0c;即如何构建能够通过自我学习掌握各种技能并执行现实生活中的种种通用任务的高端机器人。清华大学计算机系教授张钹院士&#xff0c;也在某产业智能论…...

编程日记 2023/10/13 2:32:59

C语言的文件写入、读取

目标1&#xff1a;使用C语言的文件操作来实现一次性将输入的数据转换为字符串写入文件&#xff0c;然后逐行读取并进行操作。 模板 #include <stdio.h>int main() {// 打开文件以写入数据FILE *file fopen("data.txt", "w");if (file NULL) {pri…...

编程日记 2023/10/13 2:30:58

CART 算法——决策树

目录 1.CART的生成&#xff1a; &#xff08;1&#xff09;回归树的生成 &#xff08;2&#xff09;分类树的生成 ①基尼指数 ②算法步骤 2.CART剪枝&#xff1a; &#xff08;1&#xff09;损失函数 &#xff08;2&#xff09;算法步骤&#xff1a; CART是英文“class…...

编程日记 2023/10/13 2:29:57

CF1877A Goals of Victory

题目是说&#xff0c;有n个队伍进行足球赛&#xff0c;两两之间进行一场足球赛&#xff0c;会有一个积分&#xff0c;a:b&#xff0c;题目所说的efficiency表示的是一个队伍的得分减去对手队伍的得分 #include<bits/stdc.h> using namespace std;int num[110];int main(…...

编程日记 2023/10/13 2:28:55

018-第三代软件开发-整体介绍

第三代软件开发-整体介绍 文章目录 第三代软件开发-整体介绍项目介绍整体介绍Qt 属性系统QML 最新软件技术框架 关键字&#xff1a; Qt、 Qml、 属性、 Qml 软件架构 项目介绍 欢迎来到我们的 QML & C 项目&#xff01;这个项目结合了 QML&#xff08;Qt Meta-Object …...

编程日记 2023/10/13 2:27:54

储存数据文本json的读写

系列文章目录 提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加 TODO:写完再整理 文章目录 系列文章目录前言一、json文本介绍二、json文本的应用三、json文本的操作1、环境配置2、写入文件3、读取文件4、文件格式解析注意的点参考链接前言 认知有限，望大家…...

编程日记 2023/10/13 2:26:53

Java之动态代理的详细解析

2. 动态代理 2.1 好处&#xff1a; 无侵入式的给方法增强功能 2.2 动态代理三要素&#xff1a; 1&#xff0c;真正干活的对象 2&#xff0c;代理对象 3&#xff0c;利用代理调用方法 切记一点&#xff1a;代理可以增强或者拦截的方法都在接口中&#xff0c;接口需要写在…...

编程日记 2023/10/13 2:23:49

github Release 下载加速，绿色合法，遥遥领先

你有没有这样一个困惑&#xff0c;当你寻找了很久终于找到一个解决问题的方案&#xff0c;发现这个工具在 GitHub 上&#xff0c;接下来等待我们的就是遥遥无期的龟速下载。 文章目录 前言下载测试加速下载操作 视频讲解 遥遥领先 前言 GitHub 作为程序员的知识宝库&#xff…...

编程日记 2023/10/13 2:22:49

RabbitMQ消息中间件概述

1.什么是RabbitMQ RabbitMQ是一个由erlang开发的AMQP&#xff08;Advanced Message Queue &#xff09;的开源实现。AMQP 的出现其实也是应了广大人民群众的需求&#xff0c;虽然在同步消息通讯的世界里有很多公开标准&#xff08;如 COBAR的 IIOP &#xff0c;或者是 SOAP 等&…...

编程日记 2023/10/13 2:21:48

12V手电钻保护板如何接线演示

爱做手工的小伙伴们肯定会用到手电钻&#xff0c;那么电池消耗完了&#xff0c;或要换的&#xff0c;或要自己动手做几个备用电源&#xff0c;关键点就是电路保护板的接线。废话不多说&#xff0c;直接上板子看实操。 文章目录 一、线路板图1、输入接线2、输出接线 二、接线方法…...

编程日记 2023/10/13 2:19:44

Visio高效安装与激活全攻略：从零开始到成功运行

1. Visio安装前的准备工作 第一次安装Visio的朋友们&#xff0c;我强烈建议先做好这些准备工作。我自己在帮同事安装Visio时&#xff0c;经常遇到因为前期准备不足导致安装失败的情况。首先&#xff0c;检查你的电脑是否已经安装了其他版本的Office软件。如果之前安装过Office …...

编程新知 2026/3/31 16:48:23

SQL 基础及 MySQL DBA 运维实战 - 6：Mycat代理技术

MySQL DBA运维实战&#xff1a;集群与代理技术深度解析 引言 在现代互联网应用中&#xff0c;数据库的高可用性、可扩展性和性能是企业级应用的核心需求。随着业务量的增长&#xff0c;单一数据库服务器往往无法满足需求&#xff0c;此时数据库集群和代理技术成为解决这些问题…...

编程新知 2026/3/31 16:44:22

Qwen3-ASR-1.7B实战教程：结合Punctuation Restoration模型提升标点准确率

Qwen3-ASR-1.7B实战教程&#xff1a;结合Punctuation Restoration模型提升标点准确率 语音识别技术已经相当成熟&#xff0c;但识别结果往往缺少标点符号&#xff0c;让长文本阅读变得困难。本文将教你如何将Qwen3-ASR-1.7B语音识别模型与标点恢复技术结合&#xff0c;获得既准…...

编程新知 2026/3/31 16:32:17

nuScenes数据集避坑指南：从数据下载到多模态可视化完整流程

nuScenes数据集实战全解析&#xff1a;从环境搭建到多模态融合可视化 自动驾驶研究离不开高质量的数据集支持&#xff0c;而nuScenes作为目前最全面的多模态自动驾驶数据集之一&#xff0c;包含了丰富的传感器数据和精细的标注信息。但在实际使用过程中&#xff0c;从数据下载到…...

编程新知 2026/3/31 16:11:47

别再折腾官方源了！用XianDian-IaaS-v2.2在CentOS7上30分钟搞定OpenStack最小化部署

30分钟极速部署OpenStack&#xff1a;XianDian-IaaS在CentOS7上的实战指南 OpenStack作为开源云计算平台的标杆&#xff0c;其强大的灵活性和模块化设计吸引了大量企业用户。但官方部署流程的复杂性往往让初学者望而却步——依赖项冲突、版本兼容性问题、繁琐的配置步骤&#x…...

编程新知 2026/3/31 16:09:46

PMOS 在电源管理中的高效应用

1. PMOS在高侧开关中的天然优势 我第一次用PMOS做高侧开关是在一个车载设备项目里。当时需要控制12V电源的通断&#xff0c;尝试了几种方案后&#xff0c;发现PMOS简直是这个场景的"天选之子"。相比NMOS&#xff0c;PMOS最大的优势就是控制逻辑简单直接——栅极拉低导…...

编程新知 2026/3/31 15:39:27

从攻到防：实战演练基于Wireshark与Snort的DoS攻击检测

1. 拒绝服务攻击初探&#xff1a;原理与危害剖析 想象一下周末去热门餐厅吃饭的场景。当所有座位都被占满&#xff0c;门口还不断涌入大量"假顾客"时&#xff0c;真正的食客就会被挡在门外——这就是拒绝服务攻击&#xff08;DoS&#xff09;的生动写照。作为网络安…...

编程新知 2026/3/31 15:08:35

SDXL 1.0插件开发：Photoshop脚本自动化集成

SDXL 1.0插件开发&#xff1a;Photoshop脚本自动化集成 1. 为什么需要Photoshop与SDXL 1.0的深度协作 设计师每天面对的不是单一工具&#xff0c;而是一整套工作流。当AI生成图像成为创意起点&#xff0c;问题就来了&#xff1a;生成的图片如何快速进入专业设计环节&#xff…...

编程新知 2026/3/31 13:34:56

Ostrakon-VL-8B功能体验：图文对话模型在零售场景的真实表现

Ostrakon-VL-8B功能体验&#xff1a;图文对话模型在零售场景的真实表现 1. 零售场景下的AI助手需求 在零售行业&#xff0c;每天都有大量需要人工处理的视觉任务&#xff1a;商品识别、货架检查、库存盘点、价格标签核对等。传统方法要么依赖人工检查效率低下&#xff0c;要么…...

编程新知 2026/3/31 12:33:51

GLM-4-9B-Chat-1M惊艳效果：碳中和白皮书（120页）中的技术路径拆解、时间节点校验与政策匹配度评分

GLM-4-9B-Chat-1M惊艳效果&#xff1a;碳中和白皮书&#xff08;120页&#xff09;中的技术路径拆解、时间节点校验与政策匹配度评分 1. 项目背景与核心能力 今天要给大家展示一个让人眼前一亮的技术应用场景——用GLM-4-9B-Chat-1M这个本地部署的大模型&#xff0c;来深度分…...

编程新知 2026/3/31 12:33:51