JS盒子的拖动
2019-05-30 22:50
204 查看
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>拖拽--Clone</title> <style type="text/css"> body,div{margin:0;padding:0;} body{background:#3e3e3e;} div{position:absolute;width:100px;height:100px;cursor:move;border:1px solid #888;background:#000;} #drag1{top:100px;left:100px;} #drag2{top:100px;left:300px;} #temp{opacity:0.3;filter:alpha(opacity=30);} </style> <script src="common.js"></script> </head> <body> <div id="drag1"></div> <div id="drag2"></div> </body> <script> //定义层级 var zIndex =1; window.onload = function () { //获取页面元素 var box1 = my$("drag1"); var box2 = my$("drag2"); //调用 getNew(box1); getNew(box2); //封装方法 }; function getNew(box) { //鼠标按下获取距离值 box.onmousedown = function (e) { var left = e.clientX - this.offsetLeft; var top = e.clientY - this.offsetTop; //并创建一个新的DIV,添加id, var newDiv = document.createElement("div"); newDiv["id"] = "temp"; //将鼠标按下获取到的距离值通过getConputedStyle.属性的方法赋值给新div newDiv.style.left = getComputedStyle(box, null).left; newDiv.style.top = getComputedStyle(box, null).top; newDiv.style.zIndex = zIndex++; document.body.appendChild(newDiv); document.onmousemove = function (e) { //鼠标移动时获取偏移量 var newLeft = e.clientX -left; var newTop = e.clientY -top; //允许移动的最大值 var maxLeft = document.documentElement.clientWidth - box.offsetWidth; var maxTop = document.documentElement.clientHeight - box.offsetHeight; //最小值 newLeft = newLeft<0?0:newLeft; newTop = newTop<0?0:newTop; //最大值 newLeft = newLeft>maxLeft?maxLeft:newLeft; newTop = newTop>maxTop?top:newTop; //赋值 newDiv.style.left = newLeft + "px"; newDiv.style.top = newTop + "px"; return false; } //鼠标松开时将新盒子的左右偏移量赋值给原先的盒子,并去除新盒子 document.onmouseup = function () { document.onmousemove = null; document.onmouseup = null; box.style.left = newDiv.style.left; box.style.top = newDiv.style.top; box.style.zIndex = newDiv.style.zIndex; document.body.removeChild(newDiv); } return false } } </script> </html>
相关文章推荐
- 前端的小玩意(8)——旋转的盒子(纯CSS动画效果)+可自由拖动(js)
- touch.js 拖动、缩放、旋转 (鼠标手势)
- js简单窗口拖动
- js实现拖动改变层的大小(宽度)
- 好友js拖动分组
- JS实现网页图片拖动
- JS-Demo1:JavaScript实现表格列拖动
- js-窗口拖动
- js拖动窗口 用层模拟可移动的小窗口
- js+ asp.Net ajax开发163邮箱效果(列表底色、多选拖动等)--checkBox多选
- Js实现无刷新添加新层,拖动DIV层可互换位置
- Js可拖拽放大的层拖动特效实现方法
- Js拖动效果(例4)
- [转载]JS拖动技术--- 关于setCapture
- JS实现拖动层(兼容大部分浏览器)
- js 页面模块自由拖动实例
- Js中的盒子模型及其几个常用的属性
- 原生js实现拖动图片左右弹性切换(模仿iPhone弹性拖拽的功能)
- js实现左侧边栏可拖动改变显示区域宽度
- div的拖动js