JS高级拖动技术 setCapture,releaseCapture

JS高级拖动技术 setCapture,releaseCapture代码如下: window.onload=function(){ objDiv=document.getElementById(‘drag’); drag(objDiv); }; functiondrag(dv){ dv.onmousedown=function(e){ vard=document; e=e||window.event;

大家好,又见面了,我是你们的朋友全栈君。

代码如下:

<script type=”text/javascript”> 

<!– 

window.οnlοad=function(){ 

objDiv = document.getElementById(‘drag’); 

drag(objDiv); 

}; 

function drag(dv){ 

dv.οnmοusedοwn=function(e){ 

var d=document; 

e = e || window.event; 

var x= e.layerX || e.offsetX; 

var y= e.layerY || e.offsetY; 

//设置捕获范围 

if(dv.setCapture){ 

dv.setCapture(); 

}else if(window.captureEvents){ 

window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP); 



d.οnmοusemοve=function(e){ 

e= e || window.event; 

if(!e.pageX)e.pageX=e.clientX; 

if(!e.pageY)e.pageY=e.clientY; 

var tx=e.pageX-x; 

var ty=e.pageY-y; 

dv.style.left=tx; 

dv.style.top=ty; 

}; 

d.οnmοuseup=function(){ 

//取消捕获范围 

if(dv.releaseCapture){ 

dv.releaseCapture(); 

}else if(window.captureEvents){ 

window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP); 



//清除事件 

d.οnmοusemοve=null; 

d.οnmοuseup=null; 

}; 

}; 



//–> 

</script> 

<div id=”drag” style=”position:absolute;left:12px;top:24px;width:100;height:150;border:1px solid #000000;z-index:1;background:#eeeeee”>drag me</div> 



setCapture 的意思就是设置一个对象的方法被触发的范围,或者作用域。 


如果不设置,则div只在当前窗口内被触发。如果设置,则在整个浏览器范围内被触发,也就是可以拖到浏览器外面

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/134920.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 归并排序 详解「建议收藏」

    归并排序 详解「建议收藏」注:内容,图片来自于慕课网liuyubobobo老师的课程。算法复杂度:O(nlogn);也许有很多同学说,原来也学过很多O(n^2)或者O(n^3)的排序算法,有的可能优化一下能到O(n)的时间复杂度,但是在计算机中都是很快的执行完了,没有看出来算法优化的步骤,那么我想说有可能是你当时使用的测试用例太小了,我们可以简单的做一下比较:当数据量很大的时候nlogn的优势将会比…

    2022年8月12日
    5
  • 2021-07-08总结

    2021-07-08总结

    2022年2月19日
    30
  • Java优化_解决if嵌套过多

    Java优化_解决if嵌套过多文章目录 一、使用策略模式 二、其他方案 1.分解条件表达式 2.合并重复的条件判断 3.提前判断返回 4.引入断言工具类 5.善用 Optional 6.使用枚举 7.枚举多态 8.类多态 9

    2022年9月15日
    2
  • batch spring 重复执行_Spring Batch批处理

    batch spring 重复执行_Spring Batch批处理SpringBatch批处理批处理顾名思义是批量处理大量数据,但是这个大量数据又不是特别大的大数据,比Hadoop等要轻量得多,适合企业单位人数薪资计算,财务系统月底一次性结算等常规数据批量处理。SpringBatch是一个用于创建健壮的批处理应用程序的完整框架。您可以创建可重用的函数来处理大量数据或任务,通常称为批量处理。如SpringBatch文档中所述,使用该框架的最常见方案如下:•定…

    2022年5月28日
    55
  • 进程调度算法;先来先服务调度算法、短作业优先调度算法、时间片轮转调度算法「建议收藏」

    进程调度算法;先来先服务调度算法、短作业优先调度算法、时间片轮转调度算法「建议收藏」一、实验目的和要求1.了解进程调度算法的特点2.掌握进程调度算法,如先来先服务调度算法(firstcomefirstserved,FCFS)、短作业优先调度算法(shotjobfirst,SJF)、时间片轮转调度算法。二、实验内容设计模拟实现FCFS、SJF、时间片轮转调度算法的C语言程序1.FCFS算法:按照作业/进程进入队列的先后顺序进行挑选,先进入的将先进行…

    2022年9月29日
    2
  • 竞争性需求分析

    竞争性需求分析

    2021年11月18日
    48

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号