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>
相关文章
- php+js实现极验,拖动滑块验证码验证表单
- HTML+CSS+JS网页设计期末课程大作业 web前端开发技术 web课程设计 网页规划与设计
- html如何只刷新页面指定,js控制页面刷新 JS刷新当前页面的几种方法总结
- webpack配置文件_webpackconfig.js详解
- 【说站】一分钟带你快速了解js面向对象是什么?
- Js排序算法_js 排序算法
- JS面试题-js新增基本数据类型BigInt
- js中四舍五入的方法_JS取整
- 【JS 逆向百例】猿人学系列 web 比赛第五题:js 混淆 - 乱码增强,详细剖析
- clipboard.js:最轻便的复制页面内容到剪切板的JS
- 【源码】PDF.js批注注释插件库(纯JS). 创建和保存PDF批注(PDF 高亮/签名/插图/截屏/文本框/画笔/多边形)-pdf.js
- Linux下JS开发的新技术探索(linuxjs开发)
- Linux上的JS压缩工具(js压缩工具linux)
- 使用JS实现Redis数据读取(js读取redis)
- 使用JS在网页中连接Oracle数据库(js网页链接oracle)
- 使用JS操作Oracle数据库探索潜在可能性(js和oracle数据库)
- 使用Oracle和JS开发新一代应用仿真世界(oracle js)
- js活用事件触发对象动作
- 纯JS图片批量预加载技术代码
- js限制输入框可输入字节数代码
- js获取class的所有元素
- js实现的切换面板实例代码
- js获取php变量的实现代码
- JS将所有对象s的属性复制给对象r(原生js+jquery)
- js获取当前地址JS获取当前URL的示例代码