-
- 花开微凉zlt 2018-04-14
拖拽->鼠标跟随
1、绑定鼠标点击事件
2、获取鼠标坐标：clientX clientY (所有浏览器都支持此属性)
3、为容器元素绑定onmousemove (表明可拖拽元素只在容器元素内可拖拽)
4、将拖拽元素设置成绝对定位
5、在onmousemove中改变拖拽元素的left、top (注意left、top的算法)
6、设置left、top限定，禁止元素拖出窗口
7、当前浏览器窗口宽度document.documentElement.clientWidth或document.body.clientWidth
8、拖拽元素绑定onmouseup事件，在此事件中注销onmousemove事件，完成元素拖拽的释放效果
注意可以把left、top理解成x轴、y轴element.offsetTop 返回元素的垂直偏移位置。<br>
<br>
element.offsetLeft 返回元素的水平偏移位置。
相对于浏览器窗口- 1赞 · 2采集
-
- GYNexus 2018-03-22
- offsetLeft与style.left的区别 offsetLeft 获取的是相对于父对象的左边距 left 获取或设置相对于 具有定位属性(position定义为relative)的父对象 的左边距 如果父div的position定义为relative,子div的position定义为absolute，那么子div的style.left的值是相对于父div的值， 这同offsetLeft是相同的，区别在于： 1. style.left 返回的是字符串，如28px，offsetLeft返回的是数值28，如果需要对取得的值进行计算， 还用offsetLeft比较方便。 2. style.left是读写的，offsetLeft是只读的，所以要改变div的位置，只能修改style.left 原理：拖动的时候，光标位置在哪，面板位置就在哪，面板的坐标通过左上角的点来确定。
- 0赞 · 0采集
-
- 慕前端6546965 2018-03-06
- event=event||window.event 兼容性解决
-
截图0赞 · 0采集
-
- 慕斯卡0302065 2018-02-28
- onmousedown onmousemove onmoveseup event.clientX event.clientY
-
截图0赞 · 0采集
-
- T002967 2017-11-07
- offset可以判断元素与document的边距，eg：div元素，div.offsetLeft为div与document的左边距；clientLeft为鼠标光标与document的左边距
- 0赞 · 0采集
-
- _心灵震撼_ 2017-10-30
- onmousedown--当用户按下鼠标时触发 onmouseup---当用户放掉鼠标时触发 onmousemove---鼠标在移动时可以返回一个坐标值 offsetWidth,offsetHeight--网页中获取网页内容高度和宽度，可以用于获取网页中盒子的高度和宽度 用法：box.offsetWidth,box.offsetHeight Window 尺寸 有三种方法能够确定浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条）。 对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari： window.innerHeight - 浏览器窗口的内部高度 window.innerWidth - 浏览器窗口的内部宽度 对于 Internet Explorer 8、7、6、5： document.documentElement.clientHeight document.documentElement.clientWidth 或者 document.body.clientHeight document.body.clientWidth offsetLeft与style.left的区别 offsetLeft 获取的是相对于父对象的左边距 left 获取或设置相对于 具有定位属性(position定义为relative)的父对象 的左边距 如果父div的position定义为relative,子div的position定义为absolute，那么子div的style.left的值是相对于父div的值， 这同offsetLeft是相同的，区别在于： 1. style.left 返回的是字符串，如28px，offsetLeft返回的是数值28，如果需要对取得的值进行计算， 还用offsetLeft比较方便。 2. style.left是读写的，offsetLeft是只读的，所以要改变div的位置，只能修改style.left 原理：拖动的时候，光标位置在哪，面板位置就在哪，面板的坐标通过左上角的点来确定。 分析并解决Bug 1、确定光标在屏幕中的位置：clientheight/width 2、确定面板的位置：offsetwidth/height 3、面板的移动位置限制：四个方向 4、删除事件，mouseup方法
-
截图0赞 · 1采集
-
- 1ee_GinShine 2017-09-11
- offsetleft //浏览器与this的左边距离 同理，有四个
- 0赞 · 0采集
-
- Anxie 2017-08-12
- disX=odrag.style.left-event.clientX
-
截图0赞 · 0采集
-
- qq_沉默人生_0 2017-04-23
- 坐标计算
-
截图0赞 · 0采集
-
- qq_沉默人生_0 2017-04-23
- 坐标计算
-
截图0赞 · 0采集
-
- 慕粉2051358721 2017-04-17
- 拖拽->鼠标跟随 1、绑定鼠标点击事件 2、获取鼠标坐标：clientX clientY (所有浏览器都支持此属性) 3、为容器元素绑定onmousemove (表明可拖拽元素只在容器元素内可拖拽) 4、将拖拽元素设置成绝对定位 5、在onmousemove中改变拖拽元素的left、top (注意left、top的算法) 6、设置left、top限定，禁止元素拖出窗口 7、当前浏览器窗口宽度document.documentElement.clientWidth或document.body.clientWidth 8、拖拽元素绑定onmouseup事件，在此事件中注销onmousemove事件，完成元素拖拽的释放效果 注意可以把left、top理解成x轴、y轴
- 0赞 · 0采集
-
- 斜杠男人 2017-04-04
- 释放鼠标时卸载事件
-
截图0赞 · 0采集
-
- lihl 2017-04-01
- 1、鼠标拖拽：mousedown -> mousemove -> mouseup 2、鼠标在登录框上的位置：在鼠标按下时求的，而不是移动时求的 左：鼠标距视窗左端的距离（clientX）-登录框距视窗左端的距离（offsetLeft） 上：鼠标距视窗顶端的距离（clientY）-登录框距视窗顶端的距离（offsetTop） 3、登录框最大移动范围： 高：[0px, 视窗高（clientHeight）-登录框高（offsetHeight）] 宽：[0px, 视窗宽（clientWidth）-登录框宽（offsetWidth）]
- 0赞 · 0采集
-
- 无赖7 2017-03-20
- 1、鼠标拖拽：mousedown -> mousemove -> mouseup 2、鼠标在登录框上的位置：在鼠标按下时求的，而不是移动时求的 左：鼠标距视窗左端的距离（clientX）-登录框距视窗左端的距离（offsetLeft） 上：鼠标距视窗顶端的距离（clientY）-登录框距视窗顶端的距离（offsetTop） 3、登录框最大移动范围： 高：[0px, 视窗高（clientHeight）-登录框高（offsetHeight）] 宽：[0px, 视窗宽（clientWidth）-登录框宽（offsetWidth）]
- 0赞 · 1采集
-
- wshyzx 2017-03-19
- 1、鼠标拖拽：mousedown -> mousemove -> mouseup 2、鼠标在登录框上的位置：在鼠标按下时求的，而不是移动时求的 左：鼠标距视窗左端的距离（clientX）-登录框距视窗左端的距离（offsetLeft） 上：鼠标距视窗顶端的距离（clientY）-登录框距视窗顶端的距离（offsetTop） 3、登录框最大移动范围： 高：[0px, 视窗高（clientHeight）-登录框高（offsetHeight）] 宽：[0px, 视窗宽（clientWidth）-登录框宽（offsetWidth）]
-
截图0赞 · 0采集
-
- 白小九 2017-03-06
- 1、鼠标拖拽：mousedown -> mousemove -> mouseup 2、移动时鼠标在登录框上的位置： 左：鼠标距视窗左端的距离（clientX）-登录框距视窗左端的距离（offsetLeft） 上：鼠标距视窗顶端的距离（clientY）-登录框距视窗顶端的距离（offsetTop） 3、登录框最大移动范围： 高：[0px, 视窗高（clientHeight）-登录框高（offsetHeight）] 宽：[0px, 视窗宽（clientWidth）-登录框宽（offsetWidth）]
-
截图1赞 · 0采集
-
- Airplane 2017-02-23
- mouseup
-
截图1赞 · 0采集
-
- Airplane 2017-02-23
- 拖拽->鼠标跟随 1、绑定鼠标点击事件 2、获取鼠标坐标：clientX clientY (所有浏览器都支持此属性) 3、为容器元素绑定onmousemove (表明可拖拽元素只在容器元素内可拖拽) 4、将拖拽元素设置成绝对定位 5、在onmousemove中改变拖拽元素的left、top (注意left、top的算法) 6、设置left、top限定，禁止元素拖出窗口 7、当前浏览器窗口宽度document.documentElement.clientWidth或document.body.clientWidth 8、拖拽元素绑定onmouseup事件，在此事件中注销onmousemove事件，完成元素拖拽的释放效果 注意可以把left、top理解成x轴、y轴
- 2赞 · 1采集
-
- Airplane 2017-02-23
- 另外一个思路：保证鼠标移动到的点的坐标（x1,y1）-初始点击点的坐标(x0,y0)=窗口移动后的左上角坐标（w1,h1）-窗口初始左上角坐标（w0,h0）即可。于是w1=x1-x0+w0,h1=y1-y2+h0。这个思路实现起来似乎更为简单。
- 1赞 · 0采集
-
- Airplane 2017-02-23
- onmousedown--当用户按下鼠标时触发 onmouseup---当用户放掉鼠标时触发 onmousemove---鼠标在移动时可以返回一个坐标值 offsetWidth,offsetHeight--网页中获取网页内容高度和宽度，可以用于获取网页中盒子的高度和宽度 用法：box.offsetWidth,box.offsetHeight Window 尺寸 有三种方法能够确定浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条）。 对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari： window.innerHeight - 浏览器窗口的内部高度 window.innerWidth - 浏览器窗口的内部宽度 对于 Internet Explorer 8、7、6、5： document.documentElement.clientHeight document.documentElement.clientWidth 或者 document.body.clientHeight document.body.clientWidth offsetLeft与style.left的区别 offsetLeft 获取的是相对于父对象的左边距 left 获取或设置相对于 具有定位属性(position定义为relative)的父对象 的左边距 如果父div的position定义为relative,子div的position定义为absolute，那么子div的style.left的值是相对于父div的值， 这同offsetLeft是相同的，区别在于： 1. style.left 返回的是字符串，如28px，offsetLeft返回的是数值28，如果需要对取得的值进行计算， 还用offsetLeft比较方便。 2. style.left是读写的，offsetLeft是只读的，所以要改变div的位置，只能修改style.left 原理：拖动的时候，光标位置在哪，面板位置就在哪，面板的坐标通过左上角的点来确定。 分析并解决Bug 1、确定光标在屏幕中的位置：clientheight/width 2、确定面板的位置：offsetwidth/height 3、面板的移动位置限制：四个方向 4、删除事件，mouseup方法
- 2赞 · 1采集
-
- 慕粉0058078966 2017-02-20
- 获取窗体的宽;document.documentElement.clientWidth||document.body.clientWidth; 获取窗体的高：document.documentElement.clientHeight||document.body.clientHeight; 在可以移动位置的部分，设置mousedown事件调用fnDown函数； fnDown函数里，获取event记录鼠标跟面板距离，再设置document.onmousemove事件，再获取event通过fnMove函数设置面板位置； 最后要设置onmouseup事件， document.onmousemove=null；document.onmouseup=null ，面板才不会在鼠标释放时还跟着鼠标移动。
- 0赞 · 0采集
-
- l柳条妹妹 2017-01-11
- 鼠标移动时的调用
-
截图0赞 · 0采集
-
- l柳条妹妹 2017-01-11
- 鼠标按下，移动，抬起的操作
-
截图0赞 · 0采集
-
- 白汽水 2017-01-03
- 重难点
-
截图0赞 · 0采集
-
- Only_L 2016-12-22
- function fndown(eFndown){eFndown = eFndown || window.event; var oDrag = document.getElementById('loginPanel'), //光标按下时光标与面板的位置确定 disX = eFndown.clientX -oDrag.offsetLeft,disY=eFndown.clientY-oDrag.offsetTop; //移动 document.onmousemove = function (eFndown) {eFndown = eFndown || window.event; fnMove(eFndown,disX,disY);} //释放鼠标 document.onmouseup = function(){document.onmousemove = null; document.onmouseup = null;}} function fnMove(eFnmove,posX,posY){ var oDrag = document.getElementById('loginPanel'),l = eFnmove.clientX - posX, t = eFnmove.clientY - posY, winW = document.documentElement.clientWidth || document.body.clientWidth, winH = document.documentElement.clientHeight || document.body.clientHeight, maxW = winW - oDrag.offsetWidth - 10, maxH = winH - oDrag.offsetHeight; if(l<0){ l = 0; }else if(l>maxW){ l = maxW; } if(t<0){ t = 10; }else if(t>maxH){ t = maxH; } oDrag.style.left = l+'px'; oDrag.style.top = t +'px'; }
- 0赞 · 0采集
-
- 幕布斯7328391 2016-12-11
- 在可以移动位置的部分，设置mousedown事件调用fnDown函数； fnDown函数里，获取event记录鼠标跟面板距离，再设置document.onmousemove事件，再获取event通过fnMove函数设置面板位置； 最后要设置onmouseup事件， document.onmousemove=null；document.onmouseup=null ，面板才不会在鼠标释放时还跟着鼠标移动。
- 0赞 · 0采集
-
- 慕粉2130563850 2016-12-06
- mousedown按下鼠标，mouseup释放鼠标， mousedown和mouseup共同构成了onclick
- 0赞 · 0采集
-
- 慕粉2130563850 2016-12-06
- 窗口的宽和高 winW=document.documentElement.clientWidth||document.body.clientWidth, winY=document.documentElement.clientHeight||document.body.clientHeight,
- 0赞 · 0采集
-
- 慕粉2130563850 2016-12-06
- 不是光标在哪儿，面板就在哪，面板的位置是光标的位置减去光标与面板左上角的距离
- 0赞 · 0采集
-
- 慕粉2130563850 2016-12-06
- offsetleft offsetright offsettop offsetDown 当前对象的外边框到它上层对象的内边框之间的距离
- 0赞 · 0采集
数据加载中...