zl程序教程

您现在的位置是:首页 >  后端

当前栏目

JS拖动技术关于setCapture使用

JS技术 使用 关于 拖动 setCapture
2023-06-13 09:14:25 时间
JS拖动技术---关于setCapture(转自剑胆琴心-.Net学习笔记)
复制代码代码如下:

<scripttype="text/javascript">
<!--
window.onload=function(){
objDiv=document.getElementById("drag");
drag(objDiv);
};
functiondrag(dv){
dv.onmousedown=function(e){
vard=document;
e=e||window.event;
varx=e.layerX||e.offsetX;
vary=e.layerY||e.offsetY;
//设置捕获范围
if(dv.setCapture){
dv.setCapture();
}elseif(window.captureEvents){
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
}

d.onmousemove=function(e){
e=e||window.event;
if(!e.pageX)e.pageX=e.clientX;
if(!e.pageY)e.pageY=e.clientY;
vartx=e.pageX-x;
varty=e.pageY-y;
dv.style.left=tx;
dv.style.top=ty;
};
d.onmouseup=function(){
//取消捕获范围
if(dv.releaseCapture){
dv.releaseCapture();
}elseif(window.captureEvents){
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
}
//清除事件
d.onmousemove=null;
d.onmouseup=null;
};
};
}
//-->
</script>
<divid="drag"style="position:absolute;left:12px;top:24px;width:100;height:150;border:1pxsolid#000000;z-index:1;background:#eeeeee">dragme</div>