JavaScript鼠标拖放(Drag and Drop)

🧑‍🎓 个人主页:《爱蹦跶的大A阿》

🔥当前正在更新专栏:《VUE》 、《JavaScript保姆级教程》、《krpano》、《krpano中文文档》

​ 

✨ 前言

        拖放是现代界面不可或缺的交互方式之一。本文将介绍如何用JavaScript来实现元素的拖放功能。

        我们首先需要准备拖放事件,之后跟踪拖动过程中鼠标位置,计算元素的新坐标。我们也可以实现拖放目标,在元素ENTER和LEAVE 时做出响应。最后,可以在放置时传递数据。

        掌握拖放接口不仅可以优化交互,也可以大展创意,制作游戏等应用。让我们开始学习拖放之旅吧!

✨ 正文

本文介绍 JavaScript 实现元素的拖放功能。

开始拖放

用于启动拖动的事件是 ondragstart:

ball.ondragstart = function() {return false; // 允许拖放
};

我们还需要 ondrag 事件来实现拖放过程中元素的移动。

在拖动过程中

ball.ondrag = function(event) { // 移动 ball 到新的坐标 ball.style.left = event.clientX + 'px'; ball.style.top = event.clientY + 'px'; };

通过事件对象的 clientX/clientY 属性获取鼠标坐标来移动被拖动元素。

实现目标放置

当拖动的元素进入目标元素时候,会触发目标元素的 ondragenter 事件:

target.ondragenter = function(event) {// 高亮目标元素 (change bg color)event.target.style.background = 'pink';
};

当拖动退出目标元素时,ondragleave 事件被触发。

最后元素松开鼠标时,会触发 ondrop 事件来执行放置操作。

数据传递

可以使用 event.dataTransfer 对象在拖动源(source)和放置目标(target)之间传递数据:

// 拖动源
ball.ondragstart = function(event) {event.dataTransfer.setData('text', 'ball data'); 
};// 放置目标
field.ondrop = function(event) {let data = event.dataTransfer.getData('text');// Do something with the data
};

修正定位

在元素拖动代码示例中,球在移动时,球的中心始终位于鼠标指针下方:

ball.style.left = pageX - ball.offsetWidth / 2 + 'px';
ball.style.top = pageY - ball.offsetHeight / 2 + 'px';

不错,但这存在副作用。要启动拖放,我们可以在球上的任意位置 mousedown。但是,如果从球的边缘“抓住”球,那么球会突然“跳转”以使球的中心位于鼠标指针下方。

如果我们能够保持元素相对于鼠标指针的初始偏移,那就更好了。

例如,我们按住球的边缘处开始拖动,那么在拖动时,鼠标指针应该保持在一开始所按住的边缘位置上。

让我们更新一下我们的算法:

  1. 当访问者按下按钮(mousedown)时 —— 我们可以在变量 shiftX/shiftY 中记住鼠标指针到球左上角的距离。我们应该在拖动时保持这个距离。

    我们可以通过坐标相减来获取这个偏移:

    // onmousedown
    let shiftX = event.clientX - ball.getBoundingClientRect().left;
    let shiftY = event.clientY - ball.getBoundingClientRect().top;
  2. 然后,在拖动球时,我们将鼠标指针相对于球的这个偏移也考虑在内,像这样:

    // onmousemove
    // 球具有 position: absolute
    ball.style.left = event.pageX - shiftX + 'px';
    ball.style.top = event.pageY - shiftY + 'px';

能够更好地进行定位的最终代码: 

ball.onmousedown = function(event) {let shiftX = event.clientX - ball.getBoundingClientRect().left;let shiftY = event.clientY - ball.getBoundingClientRect().top;ball.style.position = 'absolute';ball.style.zIndex = 1000;document.body.append(ball);moveAt(event.pageX, event.pageY);// 移动现在位于坐标 (pageX, pageY) 上的球// 将初始的偏移考虑在内function moveAt(pageX, pageY) {ball.style.left = pageX - shiftX + 'px';ball.style.top = pageY - shiftY + 'px';}function onMouseMove(event) {moveAt(event.pageX, event.pageY);}// 在 mousemove 事件上移动球document.addEventListener('mousemove', onMouseMove);// 放下球,并移除不需要的处理程序ball.onmouseup = function() {document.removeEventListener('mousemove', onMouseMove);ball.onmouseup = null;};};ball.ondragstart = function() {return false;
};

 以上介绍了拖放功能从准备到完成的完整流程。希望对大家实现拖放有帮助! 

✨ 结语

        拖放是一项强大的功能,可以优化交互,增强用户体验。本文详细介绍了拖放在 JavaScript 中的实现,涵盖初始化、跟踪拖放过程、访问数据等完整功能。

        希望这篇博客可以帮助大家深入理解拖放接口,并能应用到实际项目中。如果在学习或运用中有任何问题,欢迎在评论区与我讨论。

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

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

相关文章

【蓝桥杯冲冲冲】 [SCOI2005] 骑士精神

蓝桥杯备赛 | 洛谷做题打卡day28 文章目录 蓝桥杯备赛 | 洛谷做题打卡day28[SCOI2005] 骑士精神题目描述输入格式输出格式样例 #1样例输入 #1样例输出 #1提示题解代码我的一些话[SCOI2005] 骑士精神 题目描述 输入格式 第一行有一个正整数 T T T( T ≤ 10

随机森林超参数的网格优化(机器学习的精华--调参)

随机森林超参数的网格优化(机器学习的精华–调参) 随机森林各个参数对算法的影响 影响力参数⭐⭐⭐⭐⭐几乎总是具有巨大影响力n_estimators(整体学习能力)max_depth(粗剪枝)max_features(随机…

系统架构设计师考试大纲2023

一、 考试方式(机考) 考试采取科目连考、 分批次考试的方式, 连考的第一个科目作答结束交卷完成后自动进 入第二个科目, 第一个科目节余的时长可为第二个科目使用。 高级资格: 综合知识科目考试时长 150 分钟&#xff…

使用goland IDE编写go windows ui

最近突发奇想,想实现一款工作节奏的提示安排小闹钟。那首先解决的就是UI。本人擅长go语言。那go在windows ui的探索肯定有人做过了吧。一查还真有,通过知乎,csdn等查到目前支持最好的就是walk库了。那走起试试。 一、拷贝go代码 将官网例子…

idea中找到所有的TODO

idea中找到所有的TODO (1)快捷键 Alt6 (2)View -> Tool Windows -> TODO

kafka客户端生产者消费者kafka可视化工具(可生产和消费消息)

点击下载《kafka客户端生产者消费者kafka可视化工具(可生产和消费消息)》 1. 前言 因在工作中经常有用到kafka做消息的收发,每次调试过程中,经常需要查看接收的消息内容以及人为发送消息,从网上搜寻了一下&#xff0…

css1基础选择器

大纲 一.标签选择器 比较简单,前面直接写目标标签 二.类选择器 应用 例子 三.多类名选择器(调用时中间用空格隔开) 四.id选择器 应用 五.通配符选择器 应用 六.总结

OpenResty 安装

安装OpenResty 1.安装 首先你的Linux虚拟机必须联网 1)安装开发库 首先要安装OpenResty的依赖开发库,执行命令: yum install -y pcre-devel openssl-devel gcc --skip-broken2)安装OpenResty仓库 你可以在你的 CentOS 系统中…

VUE开发记录

1、VUE模板传递参数到JS方法 <select-language :value"item.language" change"selectLanguage($event, key)"></select-language>selectLanguage(value, key){console.log(value, key) }, 2、Element框架el-form-item自定义label和内容 <…

2024 年 5 款适用于免费 iPhone 数据恢复的工具软件

搜索一下&#xff0c;你会发现许多付费或免费的iPhone数据恢复工具声称它们可以帮助你以很高的成功率找回所有丢失的数据。然而&#xff0c;这正是问题所在。真的很难做出选择。为了进一步帮助您解决数据丢失问题&#xff0c;我们在此列出了 5 款最好的免费 iPhone 恢复软件供您…

JS第二天、原型、原型链、正则

☆☆☆☆ 什么是原型&#xff1f; 构造函数的prototype 就是原型 专门保存所有子对象共有属性和方法的对象一个对象的原型就是它的构造函数的prototype属性的值。prototype是哪来的&#xff1f;所有的函数都有一个prototype属性当函数被创建的时候&#xff0c;prototype属性…

Palworld幻兽帕鲁自建服务器32人联机开黑!

玩转幻兽帕鲁服务器&#xff0c;阿里云推出新手0基础一键部署幻兽帕鲁服务器教程&#xff0c;傻瓜式一键部署&#xff0c;3分钟即可成功创建一台Palworld专属服务器&#xff0c;成本仅需26元&#xff0c;阿里云服务器网aliyunfuwuqi.com分享2024年新版基于阿里云搭建幻兽帕鲁服…

ele-h5项目使用vue3+vite+vant4开发:第四节、业务组件-SearchView组件开发

需求分析 展示切换动画搜索框输入文字&#xff0c;自动发送请求搜索结果展示搜索状态维护历史搜索展示&#xff0c;点击历史搜索后发送请求历史搜索更多切换动画效果 <script setup lang"ts"> import OpSearch from /components/OpSearch.vue import { ref } f…

视频播放器nPlayer

nPlayer是一款功能强大的媒体播放器&#xff0c;适用于各种操作系统&#xff0c;包括iOS、Android、Windows和Mac等。它支持多种音频和视频格式&#xff0c;包括MP4、AVI、FLV、MKV等&#xff0c;并提供了高质量的音视频播放和流畅的播放速度。 nPlayer具有多种功能和特点&…

基于PSO-BP神经网络的风电功率MATLAB预测程序

微❤关注“电气仔推送”获得资料&#xff08;专享优惠&#xff09; 参考文献 基于风电场运行特性的风电功率预测及应用分析——倪巡天 资源简介 由于自然风具有一定的随机性、不确定性与波动性&#xff0c;这将会使风电场的功率预测受到一定程度的影响&#xff0c;它们之间…

【Linux】EXT2文件系统 | 磁盘分区块组 | inode

文章目录 一、前言二、EXT2文件系统 - 逻辑存储结构&#x1f4be;分区&#xff08;Partition&#xff09;分区的概念每个分区的内容Linux下查询磁盘分区 &#x1f4be;块组&#xff08;Block Group&#xff09;磁盘格式化每个块组的内容1. Superblock&#xff08;超级块&#x…

Log360,引入全新安全与风险管理功能,助力企业积极抵御网络威胁

ManageEngine在其SIEM解决方案中推出了安全与风险管理新功能&#xff0c;企业现在能够更主动地减轻内部攻击和防范入侵。 SIEM 这项新功能为Log360引入了安全与风险管理仪表板&#xff0c;Log360是ManageEngine的统一安全信息与事件管理&#xff08;SIEM&#xff09;解决方案…

算法学习——华为机考题库2(HJ11 - HJ20)

算法学习——华为机考题库2&#xff08;HJ11 - HJ20&#xff09; HJ11 数字颠倒 描述 输入一个整数&#xff0c;将这个整数以字符串的形式逆序输出 程序不考虑负数的情况&#xff0c;若数字含有0&#xff0c;则逆序形式也含有0&#xff0c;如输入为100&#xff0c;则输出为0…

如何在 Microsoft Azure 上部署和管理 Elastic Stack

作者&#xff1a;来自 Elastic Osman Ishaq Elastic 用户可以从 Azure 门户中查找、部署和管理 Elasticsearch。 此集成提供了简化的入门体验&#xff0c;所有这些都使用你已知的 Azure 门户和工具&#xff0c;因此你可以轻松部署 Elastic&#xff0c;而无需注册外部服务或配置…

JSR303参数校验-SpringMVC

文章目录 JSR303技术标准简介JSR303标准几个具体实现框架validation-apijakarta.validation-apihibernate-validatorspring-boot-starter-validation Spring Validationjavax.validation.constraints包下提供的注解org.hibernate.validator.constraints包扩展的注解校验注解默认…