js：为窗口盒子添加拖拽事件
一，在网页中添加一个独立的显示窗口，为窗口添加onmousedown和onmouseup事件来使窗口可以通过鼠标的拖拽移动。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/User3.js"></script> <style type="text/css"> body{ width: 2000px; height: 2000px; } .box{ width: 150px; height: 200px; position: absolute; right: 20px; border: 1px solid red; } .aff{ transition:all 1s; } </style> <script language="JavaScript"> /* obj.addEventListener(xEvent,fn, true) 事件冒泡 例: 当有父子关系的元素，都触发单击事件的时候，会形成事件流，事件流中的 事件会依顺序逐个触发。 addEventListener第三个参数说明 第三个参数是指事件的冒泡触发顺序，false 表示从子元素到父元素依次触发事件。 true 表示从父元素到子元素依次触发事件。 * */ function scrollEvent(obj,xEvent, fn) { if(obj.attachEvent){ obj.attachEvent("on"+xEvent,fn); } if(obj.addEventListener){ obj.addEventListener(xEvent,fn, true);//addEventListener w3c标准。 } } /*DOMMouseScroll mousewheel鼠标滚动后才会触发事件。 scroll 鼠标滚动时就会触发的事件*/ window.onload = function(){ dom.addClass( $("oDiv"),"aff"); var top=$("oDiv").style.top; top=parseInt(top); //添加scroll事件 scrollEvent(document,"scroll",function(){ var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop; var h=scrollTop+top+"px"; $("oDiv").style.top=h; }); //鼠标按下事件 $("oDive").onmousedown = function(){ dom.removeClass($("oDiv"),"aff"); //获取鼠标位置 var ev=window.event||event; var ofX= ev.clientX - $("oDiv").offsetLeft; var ofY= ev.clientY - $("oDiv").offsetTop; //鼠标移动事件 document.onmousemove = function(){ ev=window.event||event; var x=ev.clientX; var y= ev.clientY; $("oDiv").style.left = (x-ofX)+"px"; $("oDiv").style.top = (y-ofY)+"px"; } }; //鼠标离开位置 $("oDive").onmouseup = function(){ dom.addClass( $("oDiv"),"aff"); //移除事件 document.onmousemove = null; } } </script> </head> <!--事件冒泡--> <body > <div style="top:40px;" class="box" id="oDiv"> <div style="height: 30px;background-color: #000000;" id="oDive"></div> </div> </body> </html>
