<html>
<head>
<title> New Document </title>
<script>
var xCalendar,yCalendar,zCalendar,downCalendar=false,objCalendar;
function startMoveCalendar(){
objCalendar=event.srcElement; //事件触发对象
objCalendar.setCapture(); //设置属于当前对象的鼠标捕捉
zCalendar=objCalendar.style.zIndex; //获取对象的z轴坐标值
objCalendar.style.zIndex=2012; //设置对象的z轴坐标值为100,确保当前层显示在最前面
xCalendar=event.offsetX; //获取鼠标指针位置相对于触发事件的对象的X坐标
yCalendar=event.offsetY; //获取鼠标指针位置相对于触发事件的对象的Y坐标
downCalendar=true; //布尔值,判断鼠标是否已按下,true为按下,false为未按下
}
function moveCalendar(){
//判断鼠标已被按下且onmouseover和onmousedown事件发生在同一对象上
if(downCalendar&&event.srcElement==objCalendar){
with(objCalendar.style){
/*设置对象的X坐标值为文档在X轴方向上的滚动距离加上当前鼠标指针相当于文档对象的X坐标值减鼠标按下时指针位置相对于触发事件的对象的X坐标*/
posLeft=document.body.scrollLeft+event.x-xCalendar;
/*设置对象的Y坐标值为文档在Y轴方向上的滚动距离加上当前鼠标指针相当于文档对象的Y坐标值减鼠标按下时指针位置相对于触发事件的对象的Y坐标*/
posTop=document.body.scrollTop+event.y-yCalendar;
}
}
}
function stopMoveCalendar(){
downCalendar=false; //onmouseup事件触发时说明鼠标已经松开,所以设置down变量值为false
objCalendar.style.zIndex=zCalendar; //还原对象的Z轴坐标值
objCalendar.releaseCapture(); //释放当前对象的鼠标捕捉
}
</script>
</head>
<body>
<div onmousedown=startMoveCalendar() onmousemove=moveCalendar() onmouseup=stopMoveCalendar() style="position:absolute;left:20;top:190;width:100;height:150;border:1px solid #000000;z-index:1;background:#eeeeee">Layer 1</div>
<div onmousedown=startMoveCalendar() onmousemove=moveCalendar() onmouseup=stopMoveCalendar() style="position:absolute;left:60;top:10;width:100;height:150;border:1px solid #000000;z-index:2;background:#eeeeee">Layer 2</div>
<div onmousedown=startMoveCalendar() onmousemove=moveCalendar() onmouseup=stopMoveCalendar() style="position:absolute;left:100;top:90;width:100;height:150;border:1px solid #000000;z-index:3;background:#eeeeee">Layer 3</div>
</body>
</html>
分享到:
相关推荐
jquery编写HTML 鼠标可拖动层DIv 整理源代码。比网络上的其他鼠标拖动效果比较小巧,结构清楚,没有那么多花里胡哨的垃圾代码。
鼠标拖动 ; charset=gb2312" /> var drag_=false var D=new Function('obj','return document.getElementById(obj);') var oevent=new Function('e','if (!e) e = window.event;return e') function Move_...
js模拟浏览器 Ctrl+F 查找 + div层鼠标拖动 改变位置 两个功能demo js模拟浏览器 Ctrl+F 查找 + div层鼠标拖动 改变位置 两个功能demo js模拟浏览器 Ctrl+F 查找 + div层鼠标拖动 改变位置 两个功能demo js模拟...
1、html 拖动div进行相应顺序的排序,亲测可用,简单方便 2、适用于各大场景,通过相应的js拖动来执行相应的方法 3、可以下载应用,不懂的可以一起探讨
可以用鼠标拖动的DIV1
今天有个需求,要实现弹框,并且需要能过拖动位置,放大缩小等功能,这里是一个纯JS实现拖动的例子,有需要完整案例,或者其他功能可以私信,我懂的都会帮你
JS实现鼠标拖动div移动(附效果演示)
javascript实现鼠标拖动div的效果。。。
原生js实现鼠标拖动div
js 鼠标拖动对象 可让任何div实现拖动效果.docx
鼠标拖动DIV,DIV移动后加载后台JSON数据
鼠标拖动(js封装类,javascript,鼠标拖动,drag,div)
主要介绍了jQuery实现的鼠标拖动浮层功能,可实现拖动div等任何标签的效果,涉及jQuery事件响应及页面元素属性动态操作相关实现技巧,需要的朋友可以参考下
jQuery鼠标拖动div层排序代码是一款简单的div容器li标签拖拽排序功能,鼠标按住上下拖动改变排列顺序。
jquery图片鼠标拖动效果代码是一款jquery div页面图片浮动层鼠标拖动效果代码。
div 拖动,用鼠标可以任意拖动的div,jquery源码实例。
js鼠标拖动对象,可让任何div实现拖动效果,需要的朋友可以参考下。
如果选中可调整大小后,鼠标经过整个DIV的最右下角处会变成伸缩的图标,此时按住鼠标左键会产生一个半透明的DIV,按住鼠标不动拉动此半透明DIV会随着移动而调整大小,释放鼠标左键后会产生一段原始大小伸缩至半透明...
今天用vue+原生js的mousemove事件,写了个拖动,发现只能慢慢拖动才行,鼠标只要移动快了,就失效,不能拖动了; 搞了半天在,总算解决了,但是问题的深层原理还没搞清楚,知道的大侠可以留言分享,下面直接上代码:...
1.初次实现 1.1 html代码 <... <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />...div change width by drag</title> [removed][removed] </h