JavaScript实现鼠标拖拽效果
2015-11-24 00:00
746 查看
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ""> <html> <head> <title> 弹出层 </title> <style type="text/css"> #container div { margin-top: 6px; }
#select_city h3 { float: left; }
#main_city, #all_province { clear: both; }
#main_city div, #all_province div { width: 588px; clear: left; }
#main_city h4, #all_province h4 { float: left; display: inline; font-size: 16px; }
#main_city div span, #all_province div span { margin: 0 9px; cursor: pointer; font-size: 14px; }
#float_lay { width: 220px; height: 122px; border: 1px #787878 solid; position: absolute; background: #fff; z-index: 999; display: none; } </style> <script type="text/javascript"> //弹出层 function openLayer(objId, conId) { var arrayPageSize = getPageSize();//调用getPageSize()函数 var arrayPageScroll = getPageScroll();//调用getPageScroll()函数 if (!document.getElementById("popupAddr")) { //创建弹出内容层 var popupDiv = document.createElement("div"); //给这个元素设置属性与样式 popupDiv.setAttribute("id", "popupAddr") popupDiv.style.position = "absolute"; popupDiv.style.border = "1px solid #ccc"; popupDiv.style.background = "#fff"; popupDiv.style.zIndex = 99; //创建弹出背景层 var bodyBack = document.createElement("div"); bodyBack.setAttribute("id", "bodybg") bodyBack.style.position = "absolute"; bodyBack.style.width = "100%"; bodyBack.style.height = document.documentElement.scrollHeight + "px"; bodyBack.style.zIndex = 98; bodyBack.style.top = 0; bodyBack.style.left = 0; bodyBack.style.filter = "alpha(opacity=50)"; bodyBack.style.opacity = 0.5; bodyBack.style.background = "#ddf"; //实现弹出(插入到目标元素之后) var mybody = document.getElementById(objId); insertAfter(popupDiv, mybody);//执行函数insertAfter() insertAfter(bodyBack, mybody);//执行函数insertAfter() } //显示背景层 document.getElementById("bodybg").style.display = ""; //显示内容层 var popObj = document.getElementById("popupAddr") popObj.innerHTML = document.getElementById(conId).innerHTML; popObj.style.display = ""; //让弹出层在页面中垂直左右居中(统一) // popObj.style.width = "600px"; // popObj.style.height = "400px"; // popObj.style.top = arrayPageScroll[1] + (arrayPageSize[3] - 35 - 400) / 2 + 'px'; // popObj.style.left = (arrayPageSize[0] - 20 - 600) / 2 + 'px'; //让弹出层在页面中垂直左右居中(个性) var arrayConSize = getConSize(conId); popObj.style.top = arrayPageScroll[1] + (arrayPageSize[3] - arrayConSize[1]) / 2 - 50 + 'px'; popObj.style.left = (arrayPageSize[0] - arrayConSize[0]) / 2 - 30 + 'px'; } //获取内容层内容原始尺寸 function getConSize(conId) { var conObj = document.getElementById(conId) conObj.style.position = "absolute"; conObj.style.left = -1000 + "px"; conObj.style.display = ""; var arrayConSize = [conObj.offsetWidth, conObj.offsetHeight] conObj.style.display = "none"; return arrayConSize; } function insertAfter(newElement, targetElement) {//插入 var parent = targetElement.parentNode; if (parent.lastChild == targetElement) { parent.appendChild(newElement); } else { parent.insertBefore(newElement, targetElement.nextSibling); } } //获取滚动条的高度 function getPageScroll() { var yScroll; if (self.pageYOffset) { yScroll = self.pageYOffset; } else if (document.documentElement && document.documentElement.scrollTop) { yScroll = document.documentElement.scrollTop; } else if (document.body) { yScroll = document.body.scrollTop; } arrayPageScroll = new Array('', yScroll) return arrayPageScroll; } //获取页面实际大小 function getPageSize() { var xScroll, yScroll; if (window.innerHeight && window.scrollMaxY) { xScroll = document.body.scrollWidth; yScroll = window.innerHeight + window.scrollMaxY; } else if (document.body.scrollHeight > document.body.offsetHeight) { sScroll = document.body.scrollWidth; yScroll = document.body.scrollHeight; } else { xScroll = document.body.offsetWidth; yScroll = document.body.offsetHeight; } var windowWidth, windowHeight; if (self.innerHeight) { windowWidth = self.innerWidth; windowHeight = self.innerHeight; } else if (document.documentElement && document.documentElement.clientHeight) { windowWidth = document.documentElement.clientWidth; windowHeight = document.documentElement.clientHeight; } else if (document.body) { windowWidth = document.body.clientWidth; windowHeight = document.body.clientHeight; } var pageWidth, pageHeight if (yScroll < windowHeight) { pageHeight = windowHeight; } else { pageHeight = yScroll; } if (xScroll < windowWidth) { pageWidth = windowWidth; } else { pageWidth = xScroll; } arrayPageSize = new Array(pageWidth, pageHeight, windowWidth, windowHeight) return arrayPageSize; } //关闭弹出层 function closeLayer() { document.getElementById("popupAddr").style.display = "none"; document.getElementById("bodybg").style.display = "none"; return false; } </script> <script type="text/javascript"> //对“拖动点”定义:onMousedown="StartDrag(this)" onMouseup="StopDrag(this)" onMousemove="Drag(this)"即可 var move = false, oldcolor, _X, _Y; function StartDrag(obj) { //定义准备拖拽的函数 obj.setCapture(); //对当前对象的鼠标动作进行跟踪 oldcolor = obj.style.backgroundColor; obj.style.background = "#999"; obj.style.cursor = "move"; move = true; //获取鼠标相对内容层坐标 var parentwin = document.getElementById("popupAddr"); _X = parentwin.offsetLeft - event.clientX; _Y = parentwin.offsetTop - event.clientY; } function Drag(obj) { //定义拖拽函数 if (move) { var parentwin = document.getElementById("popupAddr"); parentwin.style.left = event.clientX + _X + "px"; parentwin.style.top = event.clientY + _Y + "px"; } } function StopDrag(obj) { //定义停止拖拽函数 obj.style.cursor = "default"; obj.style.background = oldcolor; obj.releaseCapture(); //停止对当前对象的鼠标跟踪 move = false; } </script> </head>
<body> <input name="Input" id="openBtn" value="可拖动层" type="button" onclick="openLayer('openBtn','contentContainer')"/>
<div id="contentContainer" style="display:none"> <div id="tab3" style="width:360px;height:200px;background:#fee;"> <div id="tabtop3"> <div id="tabtop-L3" style="cursor:default;background:#DBDEDE" onMousedown="StartDrag(this);" onMouseup="StopDrag(this);" onMousemove="Drag(this);"> <center><strong style="color:red;font-size:20px">填写内容</strong></center> </div> </div> <div id="tabcontent3" style="padding:8px"> <center><br/><br/> 内容:<textarea name='_content' id='_content' cols='20' rows='10' style='width:200px;height:70px;border:1px solid #CDCDCD;color:blue;' onpropertychange='if(this.value.length>100){this.value=this.value.slice(0,100)}'></textarea> </center> </div> <div id="tabtop-R" style="bottom:5px;"> <center><input type="button" value="确定" onclick="alert(document.getElementById('_content').value);"/> <input type="button" value="取消" onclick="closeLayer();"/></center> </div> </div> </div> </body> </html>
相关文章推荐
- 升级Ember到2.2.0版本
- JavaScript标记
- [软件渲染器入门]三,加载通过Blender扩展导出JSON格式的网格
- javascript中的this指向
- 最新版EJS的include函数已支持参数传递
- JS 回车!=提交
- JS产生随机数的几个用法!
- jsp通过易宝方式实现在线支付
- 如何在 ejs 模板中使用 helper function 外部函数进行特殊处理?
- JS滑动门
- js获取url传递参数
- Ext4.2.1学习历程之一:环境搭建及Hello ExtJS4.2
- js实现监听页面滚动实现图片延迟加载
- js正则表达式验证数字
- 原生js去除字符两端空格
- JavaScript语言精粹学习笔记(2)——对象
- week12---11月25日 JS内置对象(一)
- JavaScript DOM编程艺术—幻灯片动画
- week12---11月24日 JS基础(九)
- JSON 之FastJson解析