html 弹窗实现拖拽,原生js实现自由拖拽弹窗代码demo
本文为大家分享了原生弹窗拖拽代码demo,供大家参考,具体内容如下
效果图:
实现代码:
弹窗拖拽
*{margin:0;padding:0;}
.box{position: absolute;width: 400px;height: 300px;top:100px;left:100px;border:1px solid #001c67;background: #}
.move{position: absolute;width: 100px;height: 100px;top:100px;left:150px;border:1px solid #000;}
.move:hover{cursor: move;}
.close{position: absolute;width: 30px;height: 30px;top:0px;right:0px;background:red;text-align: center;line-height: 30px;}
window.οnlοad=function(){
var oMove=document.getElementById('move');
// 拖曳
oMove.οnmοusedοwn=fnDown;
// 关闭
var oClose=document.getElementById('close');
oClose.οnclick=function(){
document.getElementById('box').style.display='none';
}
}
function fnDown(event){
event = event || window.event;
var oDrag=document.getElementById('box'),
// 光标按下时光标和面板之间的距离
disX=event.clientX-oDrag.offsetLeft,
disY=event.clientY-oDrag.offsetTop;
// 移动
document.οnmοusemοve=function(event){
event = event || window.event;
var l=event.clientX-disX,
t=event.clientY-disY,
// 最大left,top值
leftMax=(document.documentElement.clientWidth || document.body.clientWidth)-oDrag.offsetWidth,
topMax=(document.documentElement.clientHeight || document.body.clientHeight)-oDrag.offsetHeight;
if(l<0) l=0;
if(l>leftMax) l=leftMax;
if(t<0) t=0;
if(t>topMax) t=topMax;
oDrag.style.left=l+'px';
oDrag.style.top=t+'px';
}
// 释放鼠标
document.οnmοuseup=function(){
document.οnmοusemοve=null;
document.οnmοuseup=null;
}
}
主要注意几点:
1.event,IE兼容问题
2.点击鼠标时要先判断鼠标与面板之间的距离
3.要判断弹窗与浏览器整个区域的距离,不能让弹窗跑出浏览器外的区域
4.松开鼠标要解除事件绑定,不然会有bug
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
html 弹窗实现拖拽,原生js实现自由拖拽弹窗代码demo相关推荐
- 原生js写三级联动 java_原生js三级联动的简单实现代码
本文实例为大家分享了js查询天气应用,供大家参考,具体内容如下 实现功能:打开网页时显示用户所在城市的天气状况,在输入框输入城市可查询其它城市. 实现过程:先调用百度地图的API来获取用户所在的城市, ...
- html5 原生拖拽,原生JS实现拖拽效果
这篇文章主要为大家详细介绍了原生JS实现拖拽效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 本文实例为大家分享了JS实现拖拽效果的具体代码,供大家参考,具体内容如下 ...
- 原生js实现元素拖拽onmousedown/onmousemove/onmouseup
文章目录 前言 一.实现思路 二.具体步骤 1.鼠标在元素上按下时 2.鼠标拖拽元素时 3.鼠标抬起事件 4.完整代码 总结 前言 我们在网页操作的时候,经常用到鼠标拖拽元素的行为.本篇文章就来讨论一 ...
- js随机飘动的广告图片代码demo效果示例(整理)
<!DOCTYPE html> <html><head><meta http-equiv="Content-Type" content=& ...
- js控制鼠标移动_原生JS封装可拖拽效果
项目代码已上传码云:小朋友/JavaScript 封装可拖拽特效 访问该URL可查看效果:http://is666a.gitee.io/javascript_drag/ https://www.zhi ...
- html表格宽度拖拽,原生js实现 拖拽改变 table表格列宽
table 员工编号 试用时间 转正时间 性别 姓名拼音 生日时间 民族 身高 vh20180421 2018-3-13 2018-6-13 1 LDH 1988-3-13 汉族 178 vh2018 ...
- 用鼠标左右拖拽 html,js实现鼠标拖拽div左右滑动
本文实例为大家分享了js鼠标拖拽div左右滑动的具体代码,供大家参考,具体内容如下 Title body{ position: relative; margin:0; padding:0; width ...
- 原生JS鼠标移动拖尾效果
JS 代码 function getMousePos(event) {var e = event || window.event;var mouseInfo = {mouseX : e.clientX ...
- 原生JS实现拖拽翻书特效
给大家分享一个用原生JS实现的拖拽翻书效果图,效果如下: 效果还不错吧,当然还需要两个图片. 1.书本封面. 2.书页 实现代码如下,欢迎大家复制粘贴. <!DOCTYPE html> & ...
- JS结合PHP瀑布流,JavaScript_原生JS实现响应式瀑布流布局,原生JS实现的瀑布流布局,代 - phpStudy...
原生JS实现响应式瀑布流布局 原生JS实现的瀑布流布局,代码及demo代码地址:https://github.com/leozdgao/responsive_waterfall Demo:http:/ ...
最新文章
- 请不要将抛出异常作为业务逻辑使用!!!
- What is Listing in SAP Retail?
- ocs(office communications server)通讯簿无法同步的问题集锦及解决方法
- 天转凉了,注意保暖,好吗(需求规格说明书放在github了)
- PHP操作MySQL数据库(连接、增删改操作)
- python 2x可以打么_Python打基础一定要吃透这68个内置函数
- 织梦cms高端炫酷网络建站工作室公司网站模板
- Linux修改网络配置
- 微信小程序——事件绑定
- .chm文件打开时显示找不到网页内容
- 2018计算机中文期刊影响因子排名,2018期刊影响因子排名(1)
- 前端笔记1 HTML基础
- 超七成阅读APP都借百度语音技术促用户增长
- 浏览器主页被2345拦截
- 微软发布命令行神器,文件误删秒恢复
- 增强型Rabin签名算法
- OPenGL--Transform feedback基础
- 海南计算机的初中学校有哪些,海南海口十大初中排行榜
- 豆瓣评分9.3,登榜热搜26次!电视剧《觉醒年代》为何能做到深入人心?
- VC MFC C++ IPControl CIPAddressCtrl IP输入控件使用