java鼠标左键拖拽事件_探索神秘的js拖拽事件

1 问题描述

最近学习js的过程中了解到拖拽事件，鼠标拖拽效果常见于用户自定义展示页面，比如qq空间，x宝店铺装修等，操作灵动，所见即所得；或者是一个简单modal移动效果，方便用户查看原网页的内容。那么怎么灵活的实现鼠标的拖拽呢？

2 问题分析

在接触到这类问题时，首先是查阅相关博客，要有一个解答的基本思路，切忌盲目敲代码，实现鼠标的拖拽主要分为三个步骤：

1. onmousedown：鼠标按下事件，获取鼠标点击时在div中的相对位置。

2. onmousemove：鼠标移动事件，元素的位置 = 就是鼠标的位置 - 刚才的差值。

3. onmouseup：鼠标抬起事件，给鼠标移动和鼠标放开赋值null，除非再次点击，否则不会有任何移动效果。

拖拽的基本原理就是根据鼠标的移动来移动被拖拽的元素。鼠标的移动也就是x、y坐标的变化;元素的移动就是style.position的 top和left的改变。当然，并不是任何时候移动鼠标都要造成元素的移动，而应该判断鼠标左键的状态是否为按下状态，是否是在可拖拽的元素上按下的。

3 解决方案

先设置div的样式，设置绝对定位，脱离文档流，便于拖拽。

拖拽功能(主要是触发三个事件：onmousedown\onmousemove\onmouseup)

点击某物体时，move和up是全局区域，也就是整个文档通用，应该使用document对象，鼠标点击物体那一刻相对于物体左侧边框的距离=点击时的位置相对于浏览器最左边的距离-物体左边框相对于浏览器最左边的距离。

控制拖拽物体的范围只能在浏览器视窗内，不允许出现滚动条。

4 总结

在实现基本的效果之前，有几点需要说明的：

1、元素想要被拖动，它的postion属性一定要是relative或absolute。

2、通过event.clientX和event.clientY获取鼠标的坐标。

3、onmousemove是绑定在document元素上而不是拖拽元素本身，这样能解决快速拖动造成的延迟或停止移动的问题。

更多精彩文章：

什么是机器学习

关于网页首页设计的一点思考

新手小白应该如何学习MUI

聊一聊编程的本质

深入理解浏览器内核 - 概述

深入理解浏览器内核 - 浏览器内核介绍

深入理解浏览器内核 - 浏览器内核依赖关系

python快速求解不定积分和定积分

AI告诉你张无忌最爱的竟是...

Jupyter快速编辑高大上数学公式 泰勒展开式

Jupyter快速编辑高大上数学公式 常见希腊字母

基本初等函数 指数函数

基本初等函数 指数函数 代码篇

聊一聊JavaWeb面试

聊一聊单片机和服务器

50行代码实现简单的网站服务器

50行代码实现网站服务器 2

50行代码实现网站服务器 3

Tomcat源码分析之 doGet方法(一)

Tomcat源码分析之 doGet方法(二)

Tomcat源码分析之 doGet方法(三)

Tomcat源码分析之 doGet方法(四)

Tomcat源码分析之中文乱码(一)

一种基于状态机的 DOM 树生成技术(1)

一种基于状态机的 DOM 树生成技术(2)

点击页面右下角“写留言”发表评论，期待您的参与！期待您的转发！