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>

转载于:https://www.cnblogs.com/dybe/p/8110863.html

js：为窗口盒子添加拖拽事件相关推荐

html百度地图拖动,百度地图为marker添加拖拽事件
百度的API里面并没有,但是百度的好多方法都和谷歌地图的类似,参照谷歌地图写法,写了一个简单拖拽事件 body, html,#allmap {width: 100%;height: 100%;over ...
html最小化窗口,[转载]js实现窗口(支持拉伸,拖拽,最大化,最小化,滚动
雨亭原创,转载注明执行效果: 一窗体实现的功能: 1.鼠标拖动. 2.八个方向的拉伸. 3.可定制窗口标题,内容(文本或HTML),初始大小和位置,最小宽度,高度. 4.支持滚动条. 5.关闭窗体. ...
标签页添加点击事件和拖拽事件
:draggable="true" 放在Tabs表示标签页可拖拽 @on-drag-drop="handleDragDrop" 给Tabs添加拖拽事件: cha ...
vuejs 原生JS 拖拽事件案例
原生JS or Vue 事件案例合集(详细) 提示:这里可以添加系列文章的所有文章的目录,目录需要自己手动添加 Section 1 单个或多个鼠标拖拽事件的理解提示:写完文章后,目录可以自动生成,如 ...
JavaScript(11) - 阻止事件冒泡和默认行为,拖拽,事件监听器
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录一.阻止事件冒泡和默认行为二.拖拽 1, 实现拖拽相关的三大事件: 2, 实现拖拽思路: 1, 给目标元素添加onmous ...
JavaScript学习第十六天（键盘事件、表单事件、拖拽事件、框架事件、媒体事件）
文章目录键盘事件表单事件剪贴板事件拖拽事件打印事件框架事件媒体事件总结键盘事件 onkeydown 键盘按下事件,当有按键按下时触发 onkeyup 键盘松开事件,当有按键被松开时触 ...
css拖拽调整高度,两种为wangEditor添加拖拽调整高度的方式：CSS3和jQuery UI
wangEditor是一款优秀的Web富文本编辑器,但如果能像KindEditor那样支持拖拽调整高度就更好了.有两种方式可以为wangEditor添加这一功能,这里使用的wangEditor版本为2 ...
弹出框的鼠标拖拽事件
几个与定位有关的概念: js: clientX/clientY属性:获得事件发生时鼠标指针在视口中的水平和垂直坐标. screenX/screenY属性:获取鼠标事件发生时鼠标光标相对于整个电脑屏幕的 ...
jQuery画布以及拖拽事件
jQuery 画布 canvas 属于html元素 H5新元素需要结合js 在页面上放置一个canvas元素,就相当于放置了一块画布可以绘制路径矩形圆形字符图像主要属性: width 默 ...

js：为窗口盒子添加拖拽事件

js：为窗口盒子添加拖拽事件相关推荐

最新文章

热门文章