荣耀彩票代理

IT技术互动交流平台

在限制范围内拖拽div吸附事件捕获

作者:风沙渡  发布日期:2014-09-24 21:33:08

一、实现的效果是在限制范围内拖拽div+吸附+事件捕获。

ZHEILIXUYAOLIJIEDESHISHIJIANBUHUO,ZHEIGESHIJIANBUHUOYESHIWEILEJIANRONGdivZAITUOZHUAIGUOCHENGZHONG,WENBENBUBEIXUANZHONGZHEIGEWENTI。

荣耀彩票代理RUCILIANGCHENMEIJING,TUOZHUAIYEKEYIHENSATUOHA。XIANKANKANTU,

二、一步步的实现这个拖拽过程的几个要求

(一)拖拽起来

LIMIANDEBIANKUANGSHIBIAOSHIYEMIANE(WOMENDEPINGMUSUONENGKANDAODEDONGDONG)。

HUOQUYIDONGJULIDESILU:

荣耀彩票代理JILUSHUBIAOANXIAHESHUBIAOTAIQILIANGCIDEZUOBIAO,RANHOUXIANGJIAN,ZAIJIASHANGdivGENBIANYUANZHIJIANDEJIANJU。JIUDEDAOYIDONGJULI。

之前我也在这里困惑了,不明白为什么还要再加上offsetLeft。原因就是clientX获取到的是数值是不加上div跟边缘的距离,不是marin,也不是padding,而是浏览器渲染的问题。

[XIAMIANSHIWOZIJIDELIJIE:

终于明白这个移动距离是如何计算出来的:

将式子化简之后,得到的就是移动后的Div  clientX-移动前clientX,然后再加上offsetLeft,因为这个clientX是没有把边缘计算下去,为了获取准确的数值,要把浏览器默认的边缘计算下去。

RUTUSUOYI:SHUBIAOYIDONGGUODEJULIJIUSHIWOYONGHONGSEHUACHUBUFENZAIJIASHANGdivGENBIANYUANZHIJIANDEoffsetLeft(XZHOUFANGXIANG)HEoffsetTop(YZHOUFANGXIANG)。

RUGUOSHANGMIANSHIZIBUHAOLIJIE,JIUBATAHUAJIANZHIHOULAIKAN,JIUMINGBAILE。]

JULIHUOQUWANCHENG。

XIANZAIJIUKEYITONGGUOSHUBIAODESANGESHIJIANonmousedown、onmousemove、onmouseupLAITUOZHUAISHUBIAO。DANGSHUBIAOYIDONGSHI,JIUBUDUANDIGENGGAIdivDEleftHEtopSHUXING

oDiv2.style.left = l +'px';
Div2.style.top = t +'px';

 ZUIHOU,DANGSHUBIAOTAIQISHI,YAOSHIFANGonmousedownHEonmousemoveSHIJIAN。

this.onmousedown = null;
this.onmousemove = null;

(二)边缘吸附

荣耀彩票代理BIANYUANXIFUDEYUANLIso easy。

JIYIGEPANDUANTIAOJIAN,DANGdivYUNDONGDAOJULISHANGXIAZUOYOUBIANYUANDEJULIXIAOYUMOUYIGEZHISHI,ZHEISHIJIUBAleftHEtopDEZHIGENGGAIWEIBIANYUANDEZHI。ZHEIYANGdivJIUTIEDAOBIANYUANSHANGQU。

                      var l1= oDiv1.offsetWidth - oDiv2.offsetWidth;        //限制小div在大div中拖拽,计算能拖拽的max距离
                var t1 = oDiv1.offsetHeight - oDiv2.offsetHeight;
                if(l > l1-50)
                {
                    l = l1;
                }
                if(l < 50)
                {
                    l = 0;
                }
                if(t > t1-50)
                {
                    t = t1;
                }
                if(t < 50)
                {
                    t = 0;
                }                    

(三)拖拽过程不被文字选中

divZAITUOZHUAIGUOCHENGZHONG,ZAIdivZHONGDEWENBENWENZIZONGSHIHUIBEIXUANZHONG,WEILEJIEJUEZHEIGEWENTI,YAOSHIYONGYIGEJIAOZUOSHIJIANBUHUODEZHISHI。

1、XIANLIJIEYIXIASHENMESHISHIJIANBUHUO

SHIGENSHIJIANMAOPAOXIANGFANDEYIZHONGMOXING。SHIJIANBUHUODESHIZUIHOUHUODESHIJIANDESHIZUIXIAODEZIYUANSU。SHIJIANMAOPAOZUIHOUHUODESHIJIANDESHIFUYUANSU。

ZHISUOYIZAITUOZHUAIGUOCHENGZHONG,divZHONGDEWENZIHUIBEIXUANZHONGJIUSHIYINWEIWOMEIYOUCHULIHAOSHIJIANMAOPAODEWENTI。YAOJIEJUEZHEIGEWENTI,JIELINGHAIXUXILINGREN,JIUBASHIJIANMAOPAODEWENTICHULIHAOJIUok。

         if(oDiv2.setCapture)                             //IE
            {
                document.onmousemove = moveFn;
                document.onmouseup = upFn;

                oDiv2.setCapture();                          //事件捕获后,所有事件都集中到这个div

                return false;                                //FF、Chrome、IE9
            }else                                            //FF、chrome
            {
                document.onmousemove = moveFn;               //!!!!根源所在,在优化版1中,设置为oDiv2.onmousemove时拖拽一次后无法再拖拽
                document.onmouseup = upFn;
            }

记得事件捕获后,当鼠标抬起时,也好释放

oDiv2.releaseCapture();

SAN、divTUOZHUAIDEXIANGXIDAIMA


<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='UTF-8'>
    <title>限制范围内拖拽</title>
    <style>
    *
    {
        margin: 0;
        padding: 0;
    }
    #div1
    {
        width: 500px;
        height: 500px;
        background: #CCC;
        position: relative;
    }
    #div2
    {
        width: 100px;
        height: 100px;
        background: green;
        position: absolute;
        left: 0;
        top: 0;
    }
    </style>
    <script>
    window.onload = function()
    {
        var oDiv1 = document.getElementById('div1');
        var oDiv2 = document.getElementById('div2');        

        var disX,disY;
        /*--------------开始拖拽div2-----------------*/
        oDiv2.onmousedown = function(evt)                    //oDiv2.onmousedown表示按下这个对象,, document.onmouseup整个文档对象(这里把div改成document是防止弄丢div)
        {
            var oEvent = evt || window.event;                //evt兼容FF/Chrome

             disX = oEvent.clientX - oDiv2.offsetLeft;      //-oDiv2.offsetLeft的距离是为了减去div与视口边框的距离
             disY = oEvent.clientY - oDiv2.offsetTop;

            if(oDiv2.setCapture)                             //IE
            {
                document.onmousemove = moveFn;
                document.onmouseup = upFn;

                oDiv2.setCapture();                          //事件捕获后,所有事件都集中到这个div

                return false;                                   //FF、Chrome、IE9
            }else                                            //FF、chrome
            {
                document.onmousemove = moveFn;               //!!!!根源所在,在优化版1中,设置为oDiv2.onmousemove时拖拽一次后无法再拖拽
                document.onmouseup = upFn;
            }

            function moveFn(evt)                 //把document重新改为div,利用setCapture事件捕获,把事件都集中在一个物体上
            {
                var oEvent = evt || window.event;
                var l = oEvent.clientX - disX;            //计算鼠标移过的距离
                var t = oEvent.clientY - disY;

                var l1= oDiv1.offsetWidth - oDiv2.offsetWidth;        //限制小div在大div中拖拽,计算能拖拽的max距离
                var t1 = oDiv1.offsetHeight - oDiv2.offsetHeight;
                if(l > l1-50)
                {
                    l = l1;
                }
                if(l < 50)
                {
                    l = 0;
                }
                if(t > t1-50)
                {
                    t = t1;
                }
                if(t < 50)
                {
                    t = 0;
                }

                oDiv2.style.left = l +'px';
                oDiv2.style.top = t +'px';
            }

            function upFn()
            {
                this.onmousedown = null;
                this.onmousemove = null;
                
                if(oDiv2.releaseCapture)                                   //如果事件捕获存在,则释放事件捕获
                {
                    oDiv2.releaseCapture();
                }
            }

                return false;                                              //阻止浏览器默认事件
        };
    };
    </script>
</head>
<body>
<div id='div1'>使用了事件捕获后,现在拖拽div中的问题可不应该被选中了哦</div>
<div id='div2'>helloworld helloworld</div>
</body>
</html>

延伸阅读:

Tag标签:      
  • 专题推荐

About IT165 - 广告服务 - 隐私声明 - 版权申明 - 免责条款 - 网站地图 - 网友投稿 - 联系方式
本站内容来自于互联网,仅供用于网络技术学习,学习中请遵循相关法律法规