JS鼠标的拖拽原理

最新推荐文章于 2022-04-26 22:07:44 发布
VIP文章 最新推荐文章于 2022-04-26 22:07:44 发布
阅读量184 收藏 1
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39967005/article/details/104416829
版权

一、拖拽的流程动作

  1. 鼠标按下
  2. 鼠标移动
  3. 鼠标松开

二、拖拽流程中对应的JS事件

  1. 鼠标按下会触发onmousedown事件
obj.onmousedown = function(e) {
     
      //..........  
}
  1. 鼠标移动会触发onmousemove事件
obj.onmousemove = function(e) {
     
    //......  
}
  1. 鼠标松开会触发onmouseup事件
obj.onmouseup = function() {
     
     //......  
}

三、实现的原理讲解

拖拽其实是通过获取鼠标移动的距离来实现的，即计算移动前的位置的坐标（x，y&

最低0.47元/天 解锁文章
tangzejian210
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
如何实现js拖拽效果及原理解析
11-21
拖拽原理：按下拖拽元素后开始监听文档中鼠标移动事件，然后再监听鼠标松开事件；鼠标移动时，元素div要随着鼠标一起移动，需要计算元素div位移的距离（移动的距离=鼠标离可视窗口的位置 – 鼠标在div中相对于左上角...
原生JS鼠标拖拽的原理及实现
哈哈哈
02-11 1535
JS鼠标拖拽的原理及实现 原生JS鼠标拖拽的原理及实现。 我们在网页操作的时候，经常用到鼠标拖拽元素的行为。今天就来讨论一下鼠标拖拽元素的原理及简单的实现过程。 首先鼠标拖拽要用到三大事件。 onmousedown：鼠标选择元素 onmousemove：鼠标移动元素 onmouseup：释放元素 也就是先用鼠标点击元素，然后拖拽元素到某一位置，释放元素的过程。在这个选择，移动...
js实现鼠标拖拽div
若水弹丸之地
02-28 5106
直接上代码，简单实用。 <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript" src='./js/jquery-1.8.3.min.js
使用js实现鼠标拖拽事件
chenwf
08-22 1万+
 在博客上看到有基于jquery实现的 https://blog.csdn.net/u013344815/article/details/72598890 发现元素如果设置有margin时，拖拽会出现偏移。 改为js实现，并增加了对magin的兼容 js效果链接 jquery效果链接 <!DOCTYPE html> <html> <head> ...
JS拖拽元素原理及实现代码
热门推荐
qczxl的专栏
12-03 1万+
拖拽功能主要是用在让用户做一些自定义的动作，比如拖动排序，弹出框拖动移动等等，效果还是蛮不错的。下面讲解一下拖拽的原理，希望可以帮助到有需要的朋友！ 一、拖拽的流程动作 ①鼠标按下 ②鼠标移动 ③鼠标松开 二、拖拽流程中对应的JS事件 ①鼠标按下会触发onmousedown事件obj.onmousedown = function(e) { //.......... }②鼠标
JS拖拽原理
weixin_30808693的博客
12-09 87
实现拖拽效果主要跟鼠标的三个事件有关：　　　　 　　　　onmousedown : 选择要拖拽的元素 　　　　onmousemove : 移动元素 　　　　onmouseup : 释放元素 三个事件的关系： obj.onmousedown = function(ev){ var ev = ev||event; var disX = ev.clientX -...
JS鼠标为中心放大缩小旋转拖动
03-19
JS鼠标为中心放大缩小旋转(实现以鼠标为中心的滚动无限放大缩小)拖动旋转
js实现百度登录框鼠标拖拽效果
01-19
以百度的登录窗口为例，学习鼠标拖拽效果如何实现，拖拽范围限定以及登录窗口自动居中。学会如何制作弹出窗口特效，了解把元素设置为可拖拽的原理。 知识点： 1.掌握对可拖拽对话框的实现原理 2.了解元素如何触发...
浅析JavaScript动画模拟拖拽原理
11-28
模拟拖拽的原理： x1等于div.offsetLeft y1等于div.offsetTop x2等于ev.clientX(ev表示event事件) y2等于ev.clientY 当我们在方块上按下鼠标的时候，x2-x1即可确定。移动鼠标之后，我们用鼠标当前的位置即x4、y4...
【JavaScript源代码】js拖拽效果的原理及实现.docx
12-29
比如拖动排序，弹出框拖动移动等等　拖拽的流程动作　1、鼠标按下 会触发onmousedown事件　2、鼠标移动 会触发onmousemove事件　3、鼠标松开 会触发onmouseup事件　拖拽原理　1.鼠标按下+鼠标移动 = 拖拽-------事件...
事件知识点总结 --初学JS
typ的blog，记录工作中的问题、学习中的笔记、生活中的感想。
04-26 1325
一、事件的介绍 1.事件是什么 简单来说，事件就是用户和浏览器之间的交互行为 比如：点击鼠标、鼠标移动、关闭窗口...... 2.事件的对象 在事件对象中封禁了当前事件相关的一切信息 比如：鼠标的坐标 键盘哪个建被按下 鼠标滚轮滚动的方向等等， 当事件的响应函数被触发时 浏览器每次都会将一个事件对象作为实参传递进响应函数 这里举个例子： 这里涉及到onmousemove事件，该事件会在鼠标移动时触发 <!DOCTYPE html> <html lang="en"&g..
mousemove事件java_JS mousemove事件：鼠标移动事件
weixin_39659748的博客
02-19 2740
在JavaScript 中，mousemove 事件是一个实时响应的事件，当鼠标指针的位置发生变化时(至少移动一个像素)，就会触发 mousemove 事件。该事件响应的灵敏度主要参考鼠标指针移动速度的快慢以及浏览器跟踪更新的速度。示例下面示例演示了如何综合应用各种鼠标事件实现页面元素拖放操作的设计过程。实现拖放操作设计需要解决以下几个问题。定义拖放元素为绝对定位以及设计事件的响应过程，这个比较容...
html event_id,html中的id与onmouse系列事件知识点
weixin_30827827的博客
06-18 363
简介：最近做项目一直用vue框架，碰上了一些需要直接操作dom的情况，但是vue是数据驱动的框架，对于dom操作很弱，一个ref还不能操作组件中的dom，最后研究了一番发现dom可以直接操作，而且更简单。真是用多了框架把最原始最强大的方法都丢了。先来几个知识点铺垫然后做两个关于鼠标拖动的例子。一：重视起来id以前总是用jq，id都是用来定位元素的，但仅仅这么用就让费id的本质了，id是dom对象的...
JavaScript onmousedown选择元素,onmousemove拖动元素,onmouseup松开鼠标,磁性吸附效果示例
骑着猪猪去拍拖
06-08 5420
JavaScript onmousedown选择元素,onmousemove拖动元素,onmouseup松开鼠标示例,磁性吸附效果 #div1 { width:100px; height:100px; position:absolute; background-color:#7391C5; } #img1 { position:absolute} window.onload = functi
js实现鼠标拖拽功能基本思路
春华秋实
09-02 1万+
如果要设置物体拖拽，那么必须使用三个事件，并且这三个事件的使用顺序不能颠倒。 onmousedown：鼠标按下事件onmousemove：鼠标移动事件onmouseup：鼠标抬起事件   拖拽的基本原理就是根据鼠标的移动来移动被拖拽的元素。鼠标的移动也就是x、y坐标的变化;元素的移动就是style.position的 top和left的改变。当然，并不是任何时候移动
鼠标事件：onclick、onmousedown、onmouseup、onmouseover、onmouseout、onmouseenter、onmouseleave、鼠标的按键、 div简单拖拽
JEFF_xieyuzhi的博客
10-06 8689
鼠标事件： onclick：在鼠标左健点击弹起之后触发的事件，即一次完整的鼠标点击过程。过程完成瞬间触发函数。 onmousedown：事件会在鼠标按键被按下时发生。 onmouseup：事件会在松开鼠标按键时触发。 <!DOCTYPE html> <html lang="en"> <head> <meta cha...
原生js鼠标事件onmousedown、onmousemove、onmouseup实现窗口的拖拽
u010234868的专栏
08-29 1633
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body { margin: 0; } #nav { height: 30px; line-height: 30px; background-color: darkblue; paddin.
关于元素大小位置等信息的一些属性。有： clientLeft和clientTop clientWidth和clientHeight offsetLeft和offsetTop offsetParent
l_set_Sail的博客
05-05 366
关于元素大小位置等信息的一些属性。有： clientLeft和clientTop clientWidth和clientHeight offsetLeft和offsetTop offsetParent offsetWidth和offsetHeight scrollLeft和scrollTop scrollWidth和scrollHeight clientLeft,clientTop:表示内容区域的左...
html div 鼠标左右拖动,js实现鼠标拖动div改变其位置的教程
weixin_34049168的博客
06-04 711
无意中在墨初博客看到这个文章，很喜欢就分享给大家学习一下，虽然说要求看着很简单，但实现起来还是比较难一点的，下面就说说实现的方法！js实现鼠标拖动div改变其位置的方法先上个图示，大家看一下效果！js实现鼠标拖动的div的代码html完整代码html>Documentdiv{width:100px;height:100px;text-align:center;line-height:...
鼠标拖动改变div列宽和行高
最新发布
07-15
要实现鼠标拖动改变div列宽和行高，你可以使用JavaScript和CSS来完成。下面是一种实现方式： 1. 首先，在HTML中创建一个包含多个div的容器，每个div代表一个列或行。例如，创建一个id为"container"的div容器，并在...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值