JS实现拖拽不出浏览器距边50px吸附

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>拖拽</title><style>html,body{margin: 0;padding: 0;height: 100%;width: 100%;}div{width: 200px;height: 200px;background-color: greenyellow;position: absolute;}</style>
</head>
<body><div></div><script>var div=document.querySelector("div");div.addEventListener("mousedown",mouseMoveHandler);var browerWidth = document.body.clientWidth ;var browerHeight =document.body.clientHeight ;function mouseMoveHandler(e) {if(e.type==="mousedown"){e.preventDefault();document.point={x:e.offsetX,y:e.offsetY};document.div=this;document.addEventListener("mousemove",mouseMoveHandler);document.addEventListener("mouseup",mouseMoveHandler);}else if(e.type==="mousemove"){this.div.style.top=e.clientY-this.point.y+"px";this.div.style.left=e.clientX-this.point.x+"px";if(this.div.offsetLeft<0){this.div.style.left=0+"px";}if(this.div.offsetTop<0){this.div.style.top=0+"px";}if(this.div.offsetTop+this.div.clientHeight>browerHeight){this.div.style.top=browerHeight-this.div.clientHeight+"px";}if(this.div.offsetLeft+this.div.clientWidth>browerWidth){this.div.style.left=browerWidth-this.div.clientWidth+"px";}}else if(e.type==="mouseup"){// if(e.clientY-this.point.y<50 && e.clientX-this.point.x<50){//     this.div.style.left=0+"px";//     this.div.style.top=0+"px";// }if(e.clientX-this.point.x<50){this.div.style.left=0+"px";}if(e.clientY-this.point.y<50){this.div.style.top=0+"px";}if(browerHeight-this.div.offsetTop-this.div.clientHeight<50){this.div.style.top=browerHeight-this.div.clientHeight+"px";}if(this.div.offsetLeft+this.div.clientWidth>browerWidth-50){this.div.style.left=browerWidth-this.div.clientWidth+"px";}//松手移除事件this.removeEventListener("mousemove",mouseMoveHandler);this.removeEventListener("mouseup",mouseMoveHandler);}}</script>
</body>
</html>

JS实现拖拽不出浏览器距边50px吸附相关推荐

李炎恢 js教程拖拽上思路解析
李炎恢再讲js教程拖拽上讲到一个登录框,通过鼠标移动登录框到浏览器各个地方,我们现在对李炎恢的怎么想出进行分析: 问题期望是什么? 1.我们通过鼠标点击登录框,然后登录框被移动,松开鼠标,停止移动 ...
html5 原生拖拽,原生JS实现拖拽效果
这篇文章主要为大家详细介绍了原生JS实现拖拽效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下本文实例为大家分享了JS实现拖拽效果的具体代码,供大家参考,具体内容如下 ...
原生JS实现拖拽进度条、滚动鼠标显示相应的内容
今天要分享的是运用原生JS实现拖拽进度条.滚动鼠标显示相应的内容,实现效果如下: 以下是代码实现,欢迎大家复制粘贴. <!DOCTYPE html> <html><hea ...
js实现拖拽+碰撞+重力
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="C ...
js 鼠标拖拽改变div宽度高度
js 鼠标拖拽改变div宽度高度, <!DOCTYPE html> <html><head><meta charset="UTF-8" / ...
原生js实现拖拽上传文件
原生js实现拖拽上传文件 <!DOCTYPE html> <html lang="en"><head><meta charset=&quo ...
原生JS实现拖拽垂直进度条
先看效果图代码如下 <!DOCTYPE html> <html><head><meta http-equiv="Content-Type" ...
原生JS实现拖拽翻书特效
给大家分享一个用原生JS实现的拖拽翻书效果图,效果如下: 效果还不错吧,当然还需要两个图片. 1.书本封面. 2.书页实现代码如下,欢迎大家复制粘贴. <!DOCTYPE html> & ...
web使用panzoom.js 缩放拖拽工程图cad图
web使用panzoom.js 缩放拖拽工程图cad图前言第一步下载图片转换工具将cad的dwg转换为svg 第二步普通的cad 转换后大概4-5M 如果直接放入html 加载会很缓慢需 ...

JS实现拖拽不出浏览器距边50px吸附

JS实现拖拽不出浏览器距边50px吸附相关推荐

最新文章

热门文章

JS实现拖拽 不出浏览器 距边50px吸附

JS实现拖拽 不出浏览器 距边50px吸附相关推荐

最新文章

热门文章

JS实现拖拽不出浏览器距边50px吸附

JS实现拖拽不出浏览器距边50px吸附相关推荐