鼠标拖拽div元素

最新推荐文章于 2024-03-04 15:08:00 发布
最新推荐文章于 2024-03-04 15:08:00 发布
阅读量239 收藏
点赞数
分类专栏： JavaScript css html 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bide_tootight/article/details/79622334
版权
JavaScript 同时被 3 个专栏收录
10 篇文章 0 订阅
订阅专栏
css
10 篇文章 0 订阅
订阅专栏
html
8 篇文章 0 订阅
订阅专栏


上图中绿色箭头指向的分别是3个事件，大概的意思是：鼠标单击div#box元素后，激活了document.onmousemove鼠标移动事件，在移动鼠标时，会改变div#box的left、top值，从而达到div#box元素随着鼠标移动。单鼠标放开时触发了document.onmouseup鼠标松开事件，在鼠标松开事件里把document.onmousemove事件设为null，这时div#box就不会随鼠标移动了。

在上图中还有一项重要的事情，就是坐标的计算，他关系到div#box元素移动的是不是流畅、是不是准确。图上的标出的8个变量是主要要计算的变量：pX、pY、oL、oT、pX1、pY1、l、t，它们代表的意思如下图所示。

下图中div#box从1号位置移动到了2号位置，黄色小圆点是是鼠标单击的位置。然后需要介绍一下ev.clientX/ev.clientY与ev.pageX/ev.pageY的区别:

。。。。。。。。。。。。。。

。。。。。。。。。。。。。。

更多详情、源代码下载请点击这里


许你一城个人博客


许你一城个人博客
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
鼠标实现div拖拽
w18789476022的博客
11-06 225
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #box1 { width: 300px; height: 300px; background-color: #AAAAFF; position: absolute; } #b
补2017.5.12
aiyangai4834的博客
05-22 114
jQuery让DIV随着鼠标的移动来移动 貌似最简单的功能，却蕴含着智慧的结晶，虽然是鼠标在动，然后DIV再动，其实，真正移动的是代码~ <!DOCTYPE html> <html> <head> <meta charset="{utf-8}"> <title></...
鼠标拖拽过程
weixin_33811961的博客
03-22 113
单击鼠标时 '得到需要拖拽的对象 ，修改此处 Dim item As Rectangle = sender '获取鼠标当前位置 mouseVerticalPosition = e.GetPosition(Nothing).Y mouseHorizontalPosition = e.GetPosition(Nothing)....
div拖拽功能实现
maise6666的博客
06-21 1497
div拖拽移动
div拖拽插件——JQ.MoveBox.js（JQ插件学习）
ft2166826的专栏
04-21 662
有一段时间没更新博客了，都不知道忙些什么，学习也没什么进展，惭愧。 这一周空闲的时间学着自己写一下JQ插件。 以前用原生的JS做过类似拖拽div的效果，现在按原思路改做成一个JQ的小插件，当作制作JQ插件的一个小练习。 html为 DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w
鼠标拖动改变DIV等网页元素的大小的实现方法
08-30
下面小编就为大家带来一篇鼠标拖动改变DIV等网页元素的大小的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
JS实现网页Div层Clone拖拽效果
10-23
主要介绍了JS实现网页Div层Clone拖拽效果,涉及JavaScript响应鼠标事件动态改变页面元素位置属性及层级属性的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
jQuery实现div拖拽效果实例分析
10-22
主要介绍了jQuery实现div拖拽效果的方法,结合实例形式分析了jQuery响应鼠标事件实现页面元素样式变换的技巧与相关注意事项,需要的朋友可以参考下
JavaScript实现可拖拽的拖动层Div实例
10-23
主要介绍了JavaScript实现可拖拽的拖动层Div的方法,拖拽页面中的div块可实现div块按照拖动轨迹移动的效果,涉及javascript鼠标事件、页面元素样式结合事件函数动态操作的相关技巧,需要的朋友可以参考下
jquery实现两个div中的元素相互拖动的方法分析
10-15
主要介绍了jquery实现两个div中的元素相互拖动的方法,结合实例形式分析了jQuery基于鼠标事件响应的页面元素属性动态操作相关实现技巧,需要的朋友可以参考下
JavaScript ---鼠标拖拽元素问题总结
wzg0817的博客
04-25 240
大致分为三个步骤： 鼠标摁下 onmousedown 鼠标移动 onmousemove 鼠标抬起 onmouseup 注意的一点是 onmousemove事件和onmouseup事件是在onmousedown事件里面的 代码如下（不支持IE8及以下浏览器）：代码一 <!DOCTYPE html> <html lang="en"> <head> ...
div元素鼠标按下可拖动
m0_46415203的博客
07-17 454
元素拖动，鼠标按下可拖动div，松开取消挪动
鼠标点击div元素实现拖拽的效果
最新发布
qq_52700250的博客
03-04 306
鼠标点击div元素实现拖拽的效果
实现div的拖拽
weixin_50337713的博客
03-30 7542
拖拽：在div上按下鼠标，移动鼠标，移动过程中让div跟随鼠标移动 分析： 给div绑定鼠标按下事件 - 在按下的事件中继续绑定移动事件 div移动：设置left和top - 给div设置定位 left 和 top 的值是多少？ 获取鼠标的位置 ，就是 left 和 top left 和 top =鼠标在浏览器中位置 减去 一开始鼠标是div上的位置 <style> .box{ width: 100px; height: 100px;
jQuery实现鼠标拖拽div效果
热门推荐
小怪兽
08-30 2万+
实现这个效果的关键是给div的定位设置成absolute,然后获得鼠标移动后的位置坐标并给要移动的div。 我将它封装成了一个函数，只需要传入参数即可使用。 downDiv:鼠标按下部分的id； moveDiv:跟随鼠标移动的div的id; 代码如下： <!DOCTYPE html> <html lang="zh"> <head> <meta http-equiv="Content-Type
实现div拖拽的几种方式
Hiqingtian的博客
03-23 9833
&lt;%@page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"%&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;jQuery拖放&lt;/title&gt; &lt;scri
实现元素的拖拽
weixin_42369612的博客
07-09 302
现在会有很多奇特的需求,比如说将一个div中的p标签用拖拽就可以把这个p标签移入到另一个div中 这个时候就需要用的h5中的新特性—draggable 1.给被拖拽的元素绑定这个draggable属性 被拖拽的元素 这样就已经可以实现拖拽,但是无法移入到另一个div中 2.这是因为浏览器默认阻止拖拽,这个时候就需要对目标div进行处理,让浏览器不阻止 document.ondragover = f...
实现div鼠标拖动效果
xiazeqiang2018的博客
08-04 3212
本例是在vue中实现的拖动功能，但是基本思想是一样的。主要是根据mousedown、mousemove、mouseup三个事件，结合元素的offsetLeft和el.style.left属性实现。 顺便记录一下两者的区别： 1. offsetLeft总的来说是获取当前元素距父元素左侧的值 ，具体分两种情况： 如果当前元素仍在普通流中（即position值为static或者relative），...
鼠标移动到div上显示子div实现要点
呆若木鸡的专栏
03-19 5627
本例实现这样一个效果，当鼠标移动到div元素上时，显示子div，并且鼠标移到子div上子div仍然保持显示。当鼠标移出父子div时子div才又重新隐藏起来。子div显示的时候，重叠在后面其他div上，不能挤压后面其他div。网上找了很多例子没法完全达到这个效果，自己经过各种试验折腾了一天才搞出来，记录下来备忘。 本例使用CSS样式来控制，先贴代码： 无标题文档
HTML5利用鼠标拖拽元素创建多个div方块，鼠标可以任意拖拽一个div方块
06-09
当用户按下鼠标按钮时，dragMouseDown函数将被调用，并设置dragItem变量为当前被拖拽的div元素。在mousemove事件处理程序中，我们计算鼠标移动的距离，并根据该距离更新元素的位置。在mouseup事件处理程序中，我们将...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值