zoukankan      html  css  js  c++  java
  • JS高级拖动技术 setCapture,releaseCapturejavascript技巧

    <script type="text/javascript"> 
    <!-- 
    window.onload=function(){ 
    objDiv = document.getElementById('drag'); 
    drag(objDiv); 
    }; 
    function drag(dv){ 
    dv.onmousedown=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.onmousemove=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.onmouseup=function(){ 
    //取消捕获范围 
    if(dv.releaseCapture){ 
    dv.releaseCapture(); 
    }else if(window.captureEvents){ 
    window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP); 

    //清除事件 
    d.onmousemove=null; 
    d.onmouseup=null; 
    }; 
    }; 

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

  • 相关阅读:
    苹果系统的时间兼容问题
    WOWJS+animate滚动特效
    js的帧动画
    网页图片透明加载
    文字不可被选中设置属性!
    [转]阻塞IO与非阻塞IO
    死锁
    TCP 三次握手四次挥手
    键入网址后,期间发生了什么
    堆排序
  • 原文地址:https://www.cnblogs.com/wangjixianyun/p/2832426.html
Copyright © 2011-2022 走看看