js实现鼠标拖动div 怎么实现鼠标拖动事件

学习前端的同学你们知道怎么实现鼠标拖动事件吗?不知道的话跟着小编一起来学习了解鼠标拖动事件。

鼠标拖动事件介绍

Javascript的mousemove事件类型是一个实时响应的事件,当鼠标指针的位置发生变化时(至少移动1个像素),就会触发mousemove事件。该事件响应的灵敏度主要参考鼠标指针移动速度的快慢,以及浏览器跟踪更新的速度。

js实现鼠标拖动div 怎么实现鼠标拖动事件

例如,接下来的一个例子就演示了如何综合应用各种鼠标事件来实现页面元素拖放操作的设计过程。在实现拖放操作的设计过程中,需要理清和解决以下几个问题:

定义拖放元素为绝对定位,以及设计事件的响应过程。这个实现比较容易。

清楚几个坐标概念:按下鼠标时的指针坐标,移动过程中当前鼠标的指针坐标,松开鼠标时的指针坐标,目标被拖动元素的元素坐标,拖动过程中的目标元素坐标。

算法设计:按下鼠标时,获取目标被拖动元素和鼠标指针的坐标位置,在移动过程中实时计算鼠标偏移的距离,并利用该偏移距离加上目标被拖动元素的原始坐标位置,获得目标被拖动元素的实时坐标位置。

如上图所示,其中变量ox和oy分别记录按下鼠标时目标被拖动元素的纵横坐标值,它们可以通过事件对象的offsetLeft和offsetTom属性获取。变量mx和my分别表示按下鼠标时,鼠标指针的坐标位置。而event.mx和event.my则是事件对象的自定义属性,用它们来存储当鼠标发生移动时鼠标指针的实时坐标位置。

当获取了上面3对坐标值之后,就可以动态计算目标被拖动元素的实时坐标位置,即x轴值为ox+event.mx-mx,y轴为oy+event.my-my。当松开鼠标时,则可以释放事件类型,并记录松开鼠标时鼠标指针拖动目标元素的坐标值,以及鼠标指针的位置,留待下一次做拖动操作时调用。

  

爱华网本文地址 » http://www.413yy.cn/a/227561/615281923.html

更多阅读

鼠标不能拖动文件怎么办 鼠标左键不能拖动文件

鼠标不能拖动文件,也不能完成拖放操作了,最先发现的问题是浏览器不能拖动链接在新窗口打开了,以为是浏览器设置出了问题,经检查没有问题。  后来就发现所有和鼠标拖放有关的操作都不能完成了,这可着急了。  无意间发现在解决问题的

拖动条(SeekBar) seekbar拖动

androidSeekBar.getProgress()获取拖动条当前值调用setOnSeekBarChangeListener()方法,处理拖动条值变化事件,把SeekBar.OnSeekBarChangeListener实例作为参数传入主界面设计:<?xml version="1.0" encoding="utf-8"?><LinearLayoutxmln

禁止鼠标拖动图片 css禁止图片拖动

<img src="logo.gif" width=88 height=31ondragstart="return false;" >oncontextmenu="return false;" //禁止鼠标右键ondragstart="return false;" //禁止鼠标拖动onselectstart="returnfalse;"//文字禁止鼠标选中

电机与电力拖动复习资料

《电机与电力拖动基础》一、填空题(每空1分,共20分)1、他励直流电动机的机械特性是指在 电动机处于稳态运行的条件下转速和电磁转矩的关系。2、直流电动机的起动方法有:电枢回路串电阻

鼠标不能拖动文件 鼠标不能拖动文件怎么办

鼠标不能拖动文件,也不能完成拖放操作了,最先发现的问题是浏览器不能拖动链接在新窗口打开了,以为是浏览器设置出了问题,经检查没有问题。  后来就发现所有和鼠标拖放有关的操作都不能完成了,这可着急了。  无意间发现在解决问题的

声明:《js实现鼠标拖动div 怎么实现鼠标拖动事件》为网友讲不出過去分享!如侵犯到您的合法权益请联系我们删除