zoukankan      html  css  js  c++  java
  • 事件绑定高级应用

     1 addEvent(document.getElementById('d1'),'click', function(){alert('1');})
     2 
     3 /*绑定事件的函数封装*/
     4 function addEvent(obj, otype, fn ){
     5       if(obj.attachEvent)
     6       {
     7             obj.attachEvent('on'+otype, fn);
     8           }
     9        else{
    10           obj.addEventListener(otype,  fn, false);
    11            }
    12            }
    13       }
        function(){alert('a');stopBubble(this.ev)}
        /*阻止冒泡函数封装*/
        function stopBubble(ev){
            var e=window.event||event;
            if(e.stopPropagation)
            {
                e.stopPropagation();
                }
            else{
                window.event.cancelBubble=true;
                }
            
            };

       事件绑定

             IE方式

                  attachEvent(事件名称,函数),绑定事件处理函数

                  datachEvent(事件名称,函数),解除绑定

            DOM方式

                  addEventListener(事件名称,函数,捕获)

                   removeEventListener(事件名称,函数,捕获)

                何时使用时间绑定

                绑定事件和this

                绑定匿名函数,会无法删除

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <script>
    window.onload=function ()
    {
        var oBtn=document.getElementById('btn1');
        
        /*oBtn.onclick=function ()
        {
            alert(this);
        };*/
        
        //IE    事件绑定        this->window
        /*oBtn.attachEvent('onclick', function (){
            alert(this==window);
        });*/
        
        //FF
        oBtn.addEventListener('click', function (){
            alert(this);
        }, false);
    };
    </script>
    </head>
    
    <body>
    <input id="btn1" type="button" value="aaa" />
    </body>
    </html>
    绑定IEthis问题

    高级拖拽

             复习拖拽原理

                    距离不变

                    三个事件, down move up

                    封装成函数

             限制范围

                      对位置进行判断

                              例1 不能拖出窗口的Div

                              例2 不能拖出指定对象的div

                         磁性吸附

    高级拖拽(2)

          图片拖拽

                      阻止默认事件

           文字选中

                     阻止默认事件

                    ie下拖动问题

                           事件捕获

           碰撞检测

                   碰撞检测原理-----九宫格

                    拖拽中的碰撞检测

    高级拖拽(3)

                   与DOM的配合

                          带框的拖拽

                           保留原有的位置拖拽

                    弹出层

                           拖拽改变Div的大小

    自定义滚动条

         拖拽

               只有横向的拖拽

               限制范围------范围的大小

               计算比例---当前值/最大值

    控制其他对象,

                控制物体的大小

                控制物体的透明度

                控制文字的滚动

    鼠标滚轮

                鼠标滚轮事件

                     事件

                           mousewheel

                          DOMMousescroll

                          》DOM事件 只能绑定,阻止默认事件--preventDefault

                     属性

                         IE下  wheelDelta

                         DOM下  detail

                       应用到自定义滚动条---给谁加事件

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>上下滑动的索引值</title>
    <style>
    #div1 {200px; height:200px; background:red;}
    </style>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>上下滑动的索引值</title>
    <script>
    //处理函数监听兼容事件
    function myAddEvent(obj, sEvent, fn)
    {
        if(obj.attachEvent)
        {
            obj.attachEvent('on'+sEvent, fn);
            }
        else
        {
            obj.addEventListener(sEvent, fn, false);
            }
    }
    window.onload=function()
    {
        var oDiv=document.getElementById('div1');
            myAddEvent(oDiv, 'mouseWheel', onMouseWheel);
            myAddEvent(oDiv, 'DOMMouseScroll', onMouseWheel);
    
    function onMouseWheel(ev)
        {
            var oEvent=ev||event;
            //iE    下付,上正
            //wheelDalta
            
            //ff
            //detail 下正, 上负
            
            var bDown=true;
            alert(bDown);
            
            if(oEvent.wheelDelta)
            {
                if(oEvent.wheelDelta<0)
                {
                    bDown=true;
                    }
                else{
                    bDown=false;
                    }
                }
             else
             {
                 if(oEvent.detail>0)
                 {
                     bDown=true;
                     }
                 else
                 {
                     bDown=false;
                     }
                 }
                 alert(bDown);
            }
            myAddEvent(oDiv, 'mouseWheel', onMouseWheel);
            myAddEvent(oDiv, 'DOMMouseScroll', onMouseWheel);
        }
    </script>
    </head>
    
    <body>
    <div id="div1"></div>
    </body>
    </html>
    滚动索引设置
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style>
    #div1 {200px; height:200px; background:red;}
    </style>
    <script>
    //捕获函数处理兼容
    function myAddEvent(obj, sEvent, fn)
    {
        if(obj.attachEvent)
        {
            
            obj,attachEvent('on'+sEvent, fn);
            }
        else
        {
    
            obj.addEventListener(sEvent, fn, false);
            }
    }
    window.onload=function()
    {
        var oDiv=document.getElementById('div1');
        function onMouseWheel(ev)
        {
            var oEvent=ev||event;
            var bDown=true;
            //上下索引值兼容
            bDown=oEvent.wheelDelta?oEvent.wheelDelta<0:oEvent.detail>0;
            //处理索引值
            if(bDown)
            {
                oDiv.style.height=oDiv.offsetHeight+10+'px';
                }
            else{
                oDiv.style.height=oDiv.offsetHeight-10+'px';
                }
            //阻止默认事件兼容
            if(oEvent.preventDefault)
            {
                oEvent.preventDefault();
                }
            return false;
            }
        myAddEvent(oDiv, 'mousewheel', onMouseWheel);
        myAddEvent(oDiv, 'DOMMouseScroll', onMouseWheel);
        }
        
    </script>
    </head>
    
    <body><div id="div1"></div>
    </body>
    </html>
    滚动事件处理
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>滚动条2</title>
    <style>
    #parent {400px; height:20px; background:#CCC; position:relative; margin:20px auto;}
    #div1 {20px; height:20px; background:red; cursor:pointer; position:absolute;}
    #div2 {300px; height:300px; filter:alpha(opacity:0); opacity:0; background:yellow; }
    </style>
    <script>
    window.onload=function()
    {
        var oDiv=document.getElementById('div1');
        var oParent=document.getElementById('parent');
        var oDiv2=document.getElementById('div2');
        oDiv.onmousedown=function(ev)
        {
            var oEvent=ev||event;
            var disX=oEvent.clientX-oDiv.offsetLeft;
            
            document.onmousemove=function(ev)
            {
                var oEvent=ev||event;
                var l=oEvent.clientX-disX;
                if(l<0)
                {
                    l=0
                    }
                else if(l>oParent.offsetWidth-oDiv.offsetWidth)
                {
                    l=oParent.offsetWidth-oDiv.offsetWdith;
                    }
                    oDiv.style.left=l+'px';
                //算速度    
                var scale=l/(oParent.offsetWidth-oDiv.offsetWidth);
                oDiv2.style.filter='alpha(opacity:'+100*scale+')';
                oDiv2.style.opacity=scale;
                document.title=scale;
                };
            document.onmouseup=function()
            {
                document.onmousemove=null;
                document.onmouseup=null;
            }
            }
            };
        
    </script>
    </head>
    
    <body><div id="parent">
        <div id="div1">
    </div>
    </div>
        <div id="div2">
        </div>
    </body>
    </html>
    滚动改变亮度
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style>
    #parent {400px; height:20px; background:#CCC; position:relative; margin:20px auto;}
    #div1 {20px; height:20px; background:red; cursor:pointer; position:absolute;}
    #div2 {0px; height:0px; background:yellow;}
    </style>
    <script>
    window.onload=function()
    {
        var oDiv=document.getElementById('div1');
        var oParent=document.getElementById('parent');
        var oDiv2=document.getElementById('div2');
        oDiv.onmousemove=function(ev)
        {
            var oEvent=ev||event;
            var disX=oEvent.clientX-oDiv.offsetLeft;
            document.onmousemove=function(ev)
            {
                var oEvent=ev||event;
                var l=oEvent.clientX-disX;
                if(l<0)
                {
                    l=0
                    }
                else if(l>oParent.offsetWidth-oDiv.offsetWidth)
                {
                    l=oParent.offsetWidth-oDiv.offsetWdith;
                    }
                    oDiv.style.left=l+'px';
                //算速度    
                var scale=l/(oParent.offsetWidth-oDiv.offsetWidth);
                oDiv2.style.width=scale*300+'px';
                oDiv2.style.height=scale*300+'px';
                document.title=scale;
                }
                        document.onmouseup=function ()
            {
                document.onmousemove=null;
                document.onmouseup=null;
            }
            }
        }
    </script>
    <title>滚动条</title>
    </head>
    
    <body><div id="parent">
        <div id="div1">
    </div>
    </div>
        <div id="div2">
        </div>
    </body>
    </html>
    滚动改变大小
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <style>
    #parent {400px; height:20px; background:#CCC; position:relative; margin:20px auto;}
    #div1 {20px; height:20px; background:red; cursor:pointer; position:absolute;}
    #div2 {200px; height:300px; border:1px solid black; position:relative; overflow:hidden;}
    #div3 {position:absolute;}
    </style>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <script>
    function myAddEvent(obj, sEvent, fn)
    {
        if(obj.attachEvent)
        {
            obj.attachEvent('on'+sEvent, fn);
        }
        else
        {
            obj.addEventListener(sEvent, fn, false);
        }
    }
    
    window.onload=function ()
    {
        var oDiv=document.getElementById('div1');
        var oParent=document.getElementById('parent');
        var oDiv2=document.getElementById('div2');
        var oDiv3=document.getElementById('div3');
        
        function onMouseWheel(ev)
        {
            var oEvent=ev||event;
            var bDown=true;
            
            bDown=oEvent.wheelDelta?oEvent.wheelDelta<0:oEvent.detail>0;
            
            if(bDown)
            {
                setLeft(oDiv.offsetLeft+10);
            }
            else
            {
                setLeft(oDiv.offsetLeft-10);
            }
            
            if(oEvent.preventDefault)
            {
                oEvent.preventDefault();
            }
            
            return false;
        }
        
        myAddEvent(oParent, 'mousewheel', onMouseWheel);
        myAddEvent(oParent, 'DOMMouseScroll', onMouseWheel);
        myAddEvent(oDiv2, 'mousewheel', onMouseWheel);
        myAddEvent(oDiv2, 'DOMMouseScroll', onMouseWheel);
        
        oDiv.onmousedown=function (ev)
        {
            var oEvent=ev||event;
            var disX=oEvent.clientX-oDiv.offsetLeft;
            
            document.onmousemove=function (ev)
            {
                var oEvent=ev||event;
                var l=oEvent.clientX-disX;
                
                setLeft(l);
            };
            
            document.onmouseup=function ()
            {
                document.onmousemove=null;
                document.onmouseup=null;
            };
        };
        
        function setLeft(l)
        {
            if(l<0)
            {
                l=0;
            }
            else if(l>oParent.offsetWidth-oDiv.offsetWidth)
            {
                l=oParent.offsetWidth-oDiv.offsetWidth;
            }
            
            oDiv.style.left=l+'px';
            var scale=l/(oParent.offsetWidth-oDiv.offsetWidth);
            
            oDiv3.style.top=-(oDiv3.offsetHeight-oDiv2.offsetHeight)*scale+'px';
            
            document.title=scale;
        }
    };
    </script>
    </head>
    
    <body>
    <div id="parent">
        <div id="div1">
        </div>
    </div>
    <div id="div2">
        <div id="div3">
             所有可能让你变得更好的努力,在一开始就被你扼杀了。如果你一直没有尝试迈出第一步,怎么可能掌握栽培绿植的方法,怎么可能享受到跑步之后大汗淋漓的酣畅……难道害怕自己没有经验,害怕中途突然出现的变故,害怕事到最后依然不尽如人意的结局,或者仅仅是怕输、怕被嘲笑,就不敢尝试了吗?
      我们每个人都有自己的梦想,都有想要达成的目标,都有希望成为的样子,但在这个过程中,总会出现各种干扰。与其畏缩不前,何不趁青春年少,大胆一试?许多事情,不是因为做不到才让人失去了信心,而是因为失去了信心,才变得难以做到
      想起之前看到杨澜在书中写到她对迈克尔·乔丹的采访,这位被誉为“飞人”的伟大运动员说:“我起码有9000次投球不中,我输过不下300场比赛,有26次人们期待我投入制胜一球而我却失误了。我的一生中失败一个接着一个,这就是为什么我能够成功。我从未害怕过失败,我可以接受失败,但我不能接受没有尝试。”乔丹说,面对所有的伤痛和困境,他的法宝就是父母从小教育他的那句话:“谁都会遇到倒霉事,你的任务是想办法把坏事变成好事。
      人这一生总有很多的残缺,我不是为了追求完美而活着,我是为了弥补残缺而更好的活着。为了自己,为了父亲,也为了很多很多的关心我的人。
    
      人这一生总会遇到很多的不如意,我不是为了逃避而活着,我是为了好好地面对而更好的活着。
    
      人这一生总是会让命运作弄,一次又一次,周而复始,我不是为了认命而活着,我是为了坚持,为了信仰,为了梦想而更好的活着。
    
      即便曾经一度垂死挣扎,而今,乌云散去,风雨平息,一切又是新的开始,即便生活再艰难,人生再无奈。为了自己,为了父亲,为了很多很多关心我的人。为了信仰,为了希望,为了梦想。我想好好的活着。
        </div>
    </div>
    </body>
    </html>
    鼠标配合滚动文本

    本节重点

         拖拽---封装

         拖拽----限制范围

         拖拽----磁性吸附

         拖拽---图片

         拖拽---DOM

          碰撞检测

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <style>
    #div1 {100px; height:100px; background:red; position:absolute;}
    </style>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <script>
    window.onload=function ()
    {
        var oDiv=document.getElementById('div1');
        
        oDiv.onmousedown=function (ev)
        {
            var oEvent=ev||event;
            var disX=oEvent.clientX-oDiv.offsetLeft;
            var disY=oEvent.clientY-oDiv.offsetTop;
            
            document.onmousemove=function (ev)
            {
                var oEvent=ev||event;
                var l=oEvent.clientX-disX;
                var t=oEvent.clientY-disY;
                
                if(l<50)
                {
                    l=0;
                }
                else if(l>document.documentElement.clientWidth-oDiv.offsetWidth-50)
                {
                    l=document.documentElement.clientWidth-oDiv.offsetWidth;
                }
                
                if(t<50)
                {
                    t=0;
                }
                else if(t>document.documentElement.clientHeight-oDiv.offsetHeight-50)
                {
                    t=document.documentElement.clientHeight-oDiv.offsetHeight;
                }
                
                oDiv.style.left=l+'px';
                oDiv.style.top=t+'px';
            };
            
            document.onmouseup=function ()
            {
                document.onmousemove=null;
                document.onmouseup=null;
            };
        };
    };
    </script>
    </head>
    
    <body>
    <div id="div1">
    </div>
    </body>
    </html>
    拖拽磁性吸附
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <style>
    .box {position:absolute; border:1px dashed black;}
    #div1 {100px; height:100px; background:red; position:absolute;}
    </style>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <script>
    window.onload=function ()
    {
        var oDiv=document.getElementById('div1');
        
        oDiv.onmousedown=function (ev)
        {
            var oEvent=ev||event;
            var disX=oEvent.clientX-oDiv.offsetLeft;
            var disY=oEvent.clientY-oDiv.offsetTop;
            
            var oNewDiv=document.createElement('div');
            
            oNewDiv.className='box';
            oNewDiv.style.width=oDiv.offsetWidth+'px';
            oNewDiv.style.height=oDiv.offsetHeight+'px';
            
            document.body.appendChild(oNewDiv);
            
            document.onmousemove=function (ev)
            {
                var oEvent=ev||event;
                
                oNewDiv.style.left=oEvent.clientX-disX+'px';
                oNewDiv.style.top=oEvent.clientY-disY+'px';
            };
            
            document.onmouseup=function ()
            {
                document.onmousemove=null;
                document.onmouseup=null;
                
                oDiv.style.left=oNewDiv.style.left;
                oDiv.style.top=oNewDiv.style.top;
                
                document.body.removeChild(oNewDiv);
            };
        };
    };
    </script>
    </head>
    
    <body>
    <div id="div1">
    </div>
    </body>
    </html>
    带框拖拽
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <style>
    .box {position:absolute; border:1px dashed black;}
    #div1 {100px; height:100px; background:yellow; position:absolute;}
    </style>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <script>
    window.onload=function ()
    {
        var oDiv=document.getElementById('div1');
        
        oDiv.onmousedown=function (ev)
        {
            var oEvent=ev||event;
            var disX=oEvent.clientX-oDiv.offsetLeft;
            var disY=oEvent.clientY-oDiv.offsetTop;
            
            var oNewDiv=document.createElement('div');
            
            oNewDiv.className='box';
            oNewDiv.style.width=oDiv.offsetWidth-2+'px';
            oNewDiv.style.height=oDiv.offsetHeight-2+'px';
            oNewDiv.style.left=oDiv.offsetLeft+'px';
            oNewDiv.style.top=oDiv.offsetTop+'px';
            
            document.body.appendChild(oNewDiv);
            
            document.onmousemove=function (ev)
            {
                var oEvent=ev||event;
                
                oNewDiv.style.left=oEvent.clientX-disX+'px';
                oNewDiv.style.top=oEvent.clientY-disY+'px';
            };
            
            document.onmouseup=function ()
            {
                document.onmousemove=null;
                document.onmouseup=null;
                
                oDiv.style.left=oNewDiv.style.left;
                oDiv.style.top=oNewDiv.style.top;
                
                document.body.removeChild(oNewDiv);
            };
        };
    };
    </script>
    </head>
    
    <body>
    <div id="div1">
    </div>
    </body>
    </html>
    带框拖拽2
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <style>
    #div1 {100px; height:100px; background:red; position:absolute;}
    #div2 {100px; height:100px; background:yellow; position:absolute;}
    #div3 {100px; height:100px; background:green; position:absolute;}
    </style>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <script>
    window.onload=function ()
    {
        drag('div1');
        drag('div2');
        drag('div3');
    };
    
    function drag(id)
    {
        var oDiv=document.getElementById(id);
        
        oDiv.onmousedown=function (ev)
        {
            var oEvent=ev||event;
            var disX=oEvent.clientX-oDiv.offsetLeft;
            var disY=oEvent.clientY-oDiv.offsetTop;
            
            document.onmousemove=function (ev)
            {
                var oEvent=ev||event;
                
                oDiv.style.left=oEvent.clientX-disX+'px';
                oDiv.style.top=oEvent.clientY-disY+'px';
            };
            
            document.onmouseup=function ()
            {
                document.onmousemove=null;
                document.onmouseup=null;
            };
        };
    }
    </script>
    </head>
    
    <body>
    <div id="div1">
    </div>
    
    <div id="div2">
    </div>
    
    <div id="div3">
    </div>
    </body>
    </html>
    拖拽封装
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <style>
    #div1 {11px; height:11px; background:url(drag_ico.gif); position:absolute; bottom:0; right:0; cursor:nw-resize;}
    #div2 {200px; height:150px; background:#CCC; position:relative;}
    </style>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <script>
    window.onload=function ()
    {
        var oDiv=document.getElementById('div1');
        var oDiv2=document.getElementById('div2');
        
        oDiv.onmousedown=function (ev)
        {
            var oEvent=ev||event;
            var disX=oEvent.clientX-oDiv.offsetLeft;
            var disY=oEvent.clientY-oDiv.offsetTop;
            
            document.onmousemove=function (ev)
            {
                var oEvent=ev||event;
                
                oDiv2.style.width=oEvent.clientX-disX+oDiv.offsetWidth+'px';
                oDiv2.style.height=oEvent.clientY-disY+oDiv.offsetHeight+'px';
            };
            
            document.onmouseup=function ()
            {
                document.onmousemove=null;
                document.onmouseup=null;
            };
        };
    };
    </script>
    </head>
    
    <body>
    <div id="div2">
        <div id="div1">
        </div>
    </div>
    </body>
    </html>
    拖拽改变大小
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <style>
    #div1 {100px; height:100px; background:red; position:absolute;}
    </style>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <script>
    window.onload=function ()
    {
        var oDiv=document.getElementById('div1');
        
        oDiv.onmousedown=function (ev)
        {
            var oEvent=ev||event;
            var disX=oEvent.clientX-oDiv.offsetLeft;
            var disY=oEvent.clientY-oDiv.offsetTop;
            
            if(oDiv.setCapture)
            {
                oDiv.onmousemove=fnMove;
                oDiv.onmouseup=fnUp;
                
                oDiv.setCapture();
            }
            else
            {
                document.onmousemove=fnMove;
                document.onmouseup=fnUp;
            }
            
            function fnMove(ev)
            {
                var oEvent=ev||event;
                
                oDiv.style.left=oEvent.clientX-disX+'px';
                oDiv.style.top=oEvent.clientY-disY+'px';
            }
            
            function fnUp()
            {
                this.onmousemove=null;
                this.onmouseup=null;
                
                if(this.releaseCapture)
                {
                    this.releaseCapture();
                }
            }
            
            return false;
        };
    };
    </script>
    </head>
    
    <body>
    asdfas
    <div id="div1">
    asdfs
    </div>
    zcvx
    </body>
    </html>
    拖拽问题解决

         

         

  • 相关阅读:
    karto 资料
    底盘运动学
    QT中搜索文件列表
    Qt中引入boost库
    AGV调度理论链接
    qt开发杂记
    C++代码读取ping的网络延时
    结构体解析数据
    QJson 的简单使用
    Vue中问题总结 与未解决问题总结
  • 原文地址:https://www.cnblogs.com/hack-ing/p/5636039.html
Copyright © 2011-2022 走看看