可拖拽div
在开发的时候需要一个可拖拽的prompt弹框。自己写了一个，大概思路为：
1.获取鼠标左键按下移动的起点坐标（x,y）。
2.获取div的left和top属性。
3.得到鼠标坐标到左上角的距离（x-top,y-top）
然后不多啰嗦，看代码。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> 拖拽 </title> <meta name="Generator" content="EditPlus"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <meta content="width=device-width,initial-scale=1,user-scalable=no" name="viewport"> </head> <style type="text/css"> *{padding:0;margin:0} body{width:100%;height:100%;margin:0 auto;background:rgb(151,223,185)} html,body{margin:0;width:100%;height:100%} dv1{width:200px;height:30px;background:silver} #box{position:absolute;left:300px;top:100px;padding:5px;background:#f0f3f9;font-size:15px;-moz-box-shadow:2px 2px 4px #666666;-webkit-box-shadow:2px 2px 4px #666666;} #main{border:1px solid #a0b3d6;background:#beceed;border-bottom:1px solid #a0b3d6;padding:5px 1px;cursor:move;} #content{width:420px;height:250px;padding:10px 5px;border:1px solid #beceed} </style> <script type="text/javascript"> <!-- var dv1 = document.getElementsByTagName("div"); var isdrag = false;//拖拽标识 var x=0,y=0;//当前鼠标坐标 var box = document.getElementById("box"); var t1=0;//定时 window.onload = function() { var main = document.getElementById("main"); var box = document.getElementById("box"); var browser=navigator.appName; var b_version=navigator.appVersion; var version=parseFloat(b_version); var sp1 = document.getElementById("sp1"); sp1.innerHTML="浏览器名称："+ browser+"<br/>"+"浏览器版本："+ version; addEvent(main,"mousedown",mousedown); addEvent(window,"mouseup",mouseup); onmousemove = function(event) { if(isdrag && event.button==0) { var left = 0; var top = 0; x=event.clientX; y=event.clientY; if(t1==0){ //获取刚开始移动的鼠标到左上角的距离 dv1[0].innerHTML = x-box.offsetLeft; dv1[1].innerHTML = y-box.offsetTop; } t1 = setTimeout(checkDrag,10); left = x - dv1[0].innerHTML; top = y - dv1[1].innerHTML; box.style.left = left+"px"; box.style.top=top+"px"; } } } function mousedown(event){ if(event.button>0)return; //只能左键动作 isdrag = true; x=event.clientX; y=event.clientY; } function mouseup(event){ isdrag = false; t1=0; } /*** *自定义绑定事件方法 *obj--绑定事件对象 *type--事件名称 *fn--事件执行的函数 */ function addEvent(obj,type,fn){ if(obj.addEventListener){ obj.addEventListener(type,fn,false); }else if(obj.attachEvent){ obj.attachEvent('on'+type,fn); } } function checkDrag(){}//setTimeout调用空函数 //--> </script> <body> <div id="dv1">300</div> <div id="dv2">100</div> <span id="sp1"></span> <div id="box" style="left:300px;top:100px"> <div id="main" >拖拽</div> <div id="content"> 内容...... </div> </div> </body> </html>
一个简单的div拖拽效果，最后进行需要的样式处理和事件处理即可得到自定义prompt弹出框（这里不再写出）。
纯碎为了学习和记录。
