原生js实现拖拽功能

一、写在前面
如果我们想要实现拖拽的功能，必须要知道三个事件：
1、onmousedown：鼠标按下事件
2、onmousemove：鼠标移动事件
3、onmouseup：鼠标抬起事件
二、实现思路

我们当左键点击时，需要记录当前的鼠标点击位置相对于该元素左上角的x，y坐标，
这里我们使用diffX和diffY来表示。然后我们移动时需要不断计算当前元素距离浏
览器左边和上边的距离。然后给元素进行赋值。当鼠标抬起时，然后取消鼠标移动事
件和鼠标抬起事件。

三、代码

  <div id="drag"></div>

    * {margin: 0px;padding: 0px;}#drag {width: 200px;height: 200px;background: red;cursor: pointer;position: absolute;}

 <script>window.onload = function() {//获取drag元素let drag = document.getElementById("drag")//当鼠标按下时drag.onmousedown = function(e) {//做到浏览器兼容e = e || window.event  let diffX = e.clientX - drag.offsetLeftlet diffY = e.clientY - drag.offsetTop//当拉着box移动时document.onmousemove = function(e) {// 浏览器兼容e = e || window.eventlet left = e.clientX - diffXlet top = e.clientY - diffYif(left < 0) {left = 0}else if(left > window.innerWidth - drag.offsetWidth){left = window.innerWidth - drag.offsetWidth}if(top < 0) {top = 0}else if(top > window.innerHeight - drag.offsetHeight) {top = window.innerHeight - drag.offsetHeight}drag.style.left = left + 'px'drag.style.top = top + 'px'}// 当鼠标抬起时document.onmouseup = function(e) {this.onmousemove = nullthis.onmouseup = null}}}</script>

原生js实现拖拽功能相关推荐

html5 原生拖拽,原生JS实现拖拽效果
这篇文章主要为大家详细介绍了原生JS实现拖拽效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下本文实例为大家分享了JS实现拖拽效果的具体代码,供大家参考,具体内容如下 ...
原生js实现拖拽上传文件
原生js实现拖拽上传文件 <!DOCTYPE html> <html lang="en"><head><meta charset=&quo ...
原生JS实现拖拽进度条、滚动鼠标显示相应的内容
今天要分享的是运用原生JS实现拖拽进度条.滚动鼠标显示相应的内容,实现效果如下: 以下是代码实现,欢迎大家复制粘贴. <!DOCTYPE html> <html><hea ...
原生JS实现拖拽垂直进度条
先看效果图代码如下 <!DOCTYPE html> <html><head><meta http-equiv="Content-Type" ...
原生JS实现拖拽翻书特效
给大家分享一个用原生JS实现的拖拽翻书效果图,效果如下: 效果还不错吧,当然还需要两个图片. 1.书本封面. 2.书页实现代码如下,欢迎大家复制粘贴. <!DOCTYPE html> & ...
使用js实现拖拽功能（附具体实现代码）
js拖拽功能的实现主要依靠3个事件,分别是onousedown鼠标按下.onmousemove鼠标移动和onmouseup鼠标抬起.并且它们具体是按照这样的一个顺序执行的. event.clientX ...
原生js实现拖拽与缩放等包含js设置样式与五子棋等
最近写五子棋,写着写着,写了几个js特效,感觉还行,发出来分享一下.具体还在调试,如果有alert弹窗部分,大家自己找一下取消掉.我记得缩放的四个边角红色背景色没有去掉,嫌碍事的可以把"ba ...
原生JS的拖拽属性draggable（详解）
摘要作为h5新增的属性draggable,它能够给与一切的html元素拖动的效果.而在这个属性之下,也有着关于拖动效果的各个方法. 而这一篇文章,主要就是说一下关于draggable属性的使用以及工 ...
html表格宽度拖拽,原生js实现拖拽改变 table表格列宽
table 员工编号试用时间转正时间性别姓名拼音生日时间民族身高 vh20180421 2018-3-13 2018-6-13 1 LDH 1988-3-13 汉族 178 vh2018 ...

原生js实现拖拽功能

原生js实现拖拽功能相关推荐

最新文章

热门文章