用JS实现版面拖拽效果

类似于这样的一个版面，点击标题栏，实现拖拽效果。

添加onmousedown事件

通过获取鼠标的坐标（clientX,clientY）来改变面板的位置

注意：面板使用绝对定位方式，是以左上角为参考点，所以我们还需要获取鼠标在面板的位置，也就是以鼠标所在位置为参考点。

// 光标按下时光标和面板之间的距离disX=event.clientX-oDrag.offsetLeft,disY=event.clientY-oDrag.offsetTop;

添加onmousemove事件

在获取了鼠标相对于面板的位置后，设置面板的left，和top为鼠标坐标与对应这个值之差即可。

// 计算位置并设置l=event.clientX-disX;t=event.clientY-disY;oDrag.style.left=l+"px";oDrag.style.top=t+"px";

思考？能不能直接把letf和top的值设置为面板的offsetLeft和offsetTop属性，在数学表达式中值是相等的。

　　不能，整个过程需要分为这两个步骤！！！

添加 onmouseup事件

// 释放鼠标document.οnmοuseup=function(){document.onmousemove=null;document.onmouseup=null;}

转载于:https://www.cnblogs.com/hkie/p/6006130.html

用JS实现版面拖拽效果相关推荐

【加强版】js原生实现拖拽效果，这次没有用document的mousedown、mousemove、mouseup事件我们来点实际的（但是有个弊端：拖拽过程中鼠标会变成一个禁用符号，不太友好）
<div class='dragged'></div> //初始化需要拖拽的列initDrags() {var arr = document.querySelectorAll( ...
【墙裂推荐】【原生基础版】js原生实现拖拽效果，注意不要忘了div的cursor用grab和grabbing 还是古法炮制、传统工艺的原生代码兼容性最好，推荐
以下方式的劣势就是在放弃拖拽那一刻会触发click事件,通常如果被拖拽元素还有其他点击事件,会重复触发,往往并非业务需求.优势就是-额-貌似这段代码没什么屌优势! <div class='dra ...
js控制鼠标移动_原生JS封装可拖拽效果
项目代码已上传码云:小朋友/JavaScript 封装可拖拽特效访问该URL可查看效果:http://is666a.gitee.io/javascript_drag/ https://www.zhi ...
js实现图片拖拽效果
没拖拽之前 <!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8 ...
js实现鼠标拖拽效果
初步 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8&q ...
php拖拽原理,JS拖拽效果及原理解析
这篇文章主要介绍了如何实现js拖拽效果及原理解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下元素拖拽分成3个步骤:按下鼠标,移动鼠标,松开鼠标. ...
html5 原生拖拽,原生JS实现拖拽效果
这篇文章主要为大家详细介绍了原生JS实现拖拽效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下本文实例为大家分享了JS实现拖拽效果的具体代码,供大家参考,具体内容如下 ...
html点击控制盒子左右移动,JS实现鼠标拖拽盒子移动及右键点击盒子消失效果示例...
JS实现鼠标拖拽盒子移动及右键点击盒子消失效果示例发布时间:2020-10-04 12:47:25 来源:脚本之家阅读:121 作者:s_psycho 本文实例讲述了JS实现鼠标拖拽盒子移动及右键 ...
盒子拖拽效果，原生js实现
原生js实现拖拽效果 <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...