IT技術互動交流平台

在限製範圍內拖拽div吸附事件捕獲

作者|-_灌云信息港:風沙渡  發布日期|-093a彩票:2014-09-24 21:33:08

一_-_计提职工福利费分录、實現的效果是在限製範圍內拖拽div+吸附+事件捕獲-|2012笑话。

這裏需要理解的是事件捕獲-隆昌县地图,這個事件捕獲也是為了兼容div在拖拽過程中_-上海老庙黄金今日金价,文本不被選中這個問題---306官方彩票靠谱吗?。

如此良辰美景_-金箍didi,拖拽也可以很灑脫哈_-_太湖花亭湖风景区。先看看圖-|-易发彩票靠谱吗,

二-|采菊苑业主论坛、一步步的實現這個拖拽過程的幾個要求

(一)拖拽起來

裏麵的邊框是表示頁麵哦(我們的屏幕所能看到的東東)||-wifi密码破解器。

獲取移動距離的思路-_奇迹世界2狂战士加点:

記錄鼠標按下和鼠標抬起兩次的坐標|-|闪金镇在哪,然後相減-|中国国家领导人名单,再加上div跟邊緣之間的間距|211限时达。就得到移動距離|--上海调料市场。

之前我也在這裏困惑了|爱上公主小妹,不明白為什麼還要再加上offsetLeft-|诛仙3牵机。原因就是clientX獲取到的是數值是不加上div跟邊緣的距離-_智行彩票平台,不是marin||_o记实录刑警,也不是padding_-泉阳贴吧,而是瀏覽器渲染的問題|-天津友谊商厦。

[下麵是我自己的理解-股票套牢:

終於明白這個移動距離是如何計算出來的_-陇桥学院地址:

將式子化簡之後_||移动彩票官网,得到的就是移動後的Div  clientX-移動前clientX__-长春艺术实验中学,然後再加上offsetLeft|__黄海地震,因為這個clientX是沒有把邊緣計算下去-|后院有宝,為了獲取準確的數值-|-高中数学公式汇总,要把瀏覽器默認的邊緣計算下去_-22彩票平台。

如圖所以_-铜钱占卜:鼠標移動過的距離就是我用紅色畫出部分再加上div跟邊緣之間的offsetLeft(X軸方向)和offsetTop(Y軸方向)|_-长城物业信息管理系统。

如果上麵式子不好理解-|_百度钱包借现金,就把他化簡之後來看_038彩票怎么玩,就明白了|众发哪里下载。]

距離獲取完成--易旺彩票网安全吗。

現在就可以通過鼠標的三個事件onmousedown-公羊羽、onmousemove_-|闻一多先生的事迹、onmouseup來拖拽鼠標|-平顶山市一中珍珠班。當鼠標移動時_|云顶娱乐是不是真的吗,就不斷地更改div的left和top屬性

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

 最後-alive死囚,當鼠標抬起時_htcg13报价,要釋放onmousedown和onmousemove事件_||234彩票计划。

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

(二)邊緣吸附

邊緣吸附的原理so easy-_网通转电信代理。

給一個判斷條件-至尊彩可靠吗,當div運動到距離上下左右邊緣的距離小於某一個值時_|168现场开奖下载,這時就把left和top的值更改為邊緣的值_|诺基亚软格机。這樣div就貼到邊緣上去--花样少女是多大。

                      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;
                }                    

(三)拖拽過程不被文字選中

div在拖拽過程中|_奥术扰动,在div中的文本文字總是會被選中_问苍茫,為了解決這個問題__阿鲁科尔沁绿源,要使用一個叫做事件捕獲的知識_公安县人民政府网。

1-|水产价格、先理解一下什麼是事件捕獲

是跟事件冒泡相反的一種模型_-_芜湖文化馆。事件捕獲的是最後獲得事件的是最小的子元素|-比波网。事件冒泡最後獲得事件的是父元素_获奖身份证。

之所以在拖拽過程中-|苏州园区甲类公积金,div中的文字會被選中就是因為我沒有處理好事件冒泡的問題|-沈阳市财政局财会之窗。要解決這個問題-|仙五破解版,解鈴還須係鈴人|__霍尔瓦特大街 小说,就把事件冒泡的問題處理好久ok|_-烧酒器具。

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

                oDiv2.setCapture();                          //事件捕獲後|||快乐大本营 棒棒堂,所有事件都集中到這個div

                return false;                                //FF_||陈进平、Chrome_|广珠轻轨票价查询、IE9
            }else                                            //FF_出不去气死你、chrome
            {
                document.onmousemove = moveFn;               //_|褫!|--印度新娘第四部!|_永盛国际彩票靠谱么!|_|丧尸出笼血脉!根源所在||农历4月初七,在優化版1中_||易彩买彩票真的吗,設置為oDiv2.onmousemove時拖拽一次後無法再拖拽
                document.onmouseup = upFn;
            }

記得事件捕獲後-攻略男神h书包网手机版,當鼠標抬起時|-014期看图中肖特,也好釋放

oDiv2.releaseCapture();

三|_|360彩票定位胆杀号、div拖拽的詳細代碼


<!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表示按下這個對象|-泉城海洋极地世界门票,|361官方网站手机登录, 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||优彩网彩票官网app平台、chrome
            {
                document.onmousemove = moveFn;               //|_娱乐菲律宾15!|-|洛阳信息港绿色营地!-|-111cc彩票绿源!_|永盛娱乐手机!根源所在_-36选7好彩3奖金是多少,在優化版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'>使用了事件捕獲後_-_盈彩网app下载,現在拖拽div中的問題可不應該被選中了哦</div>
<div id='div2'>helloworld helloworld</div>
</body>
</html>

延伸閱讀|云购彩票是正规平台吗:

Tag標簽-|-盈彩网彩票: 範圍   事件  
  • 專題推薦

  • Windows7係統入門 優化 技巧技術專題
  • Windows7係統專題 無論是升級操作係統|_-118彩图库和118论坛网址大全、資料備份|-英皇李晓楠、加強資料的安全及管...... 詳細
About IT165 - 廣告服務 - 隱私聲明 - 版權申明 - 免責條款 - 網站地圖 - 網友投稿 - 聯係方式
本站內容來自於互聯網,僅供用於網絡技術學習,學習中請遵循相關法律法規
盈众彩票98彩票迪士尼彩票通博彩票凤凰彩票神州彩

免责声明: 本站资料及图片来源互联网文章,本网不承担任何由内容信息所引起的争议和法律责任。所有作品版权归原创作者所有,与本站立场无关,如用户分享不慎侵犯了您的权益,请联系我们告知,我们将做删除处理!