原生JS拖拽效果

很多時候我們做網站都會遇到 JS拖拽的需求，今天就按照一個彈出框拖拽作為一個小案例寫個JS原生的程式碼。

按照上面的需求我們們開始製作一個拖拽效果吧。

 

第一步、我們們得寫一個佈局和響應的css

<div id="box">
    <div id="btn">標題</div>
    <p>青格勒前端部落格！</p>
    <p>www.cenggel.com</p></div>

<style>
    #box{ height:200px; width:200px; background:#999; position:absolute;}    #btn{ height:30px; background:#000; cursor:all-scroll; padding:0 10px; color:#fff;}</style>

這裡的話我們們id=btn的為拖拽的區域。

 

二、邏輯講述

整個JS程式碼不是很多，當滑鼠按下的時候獲取滑鼠的位置和id=box的上距和左邊距，然後計算目前的位置。

然後這時候滑鼠移動的時候再次計算滑鼠的位置，然後給id=box位置

當滑鼠按鈕鬆開的時候把onmousemove和onmouseup清除掉

 

三、JS程式碼部分

<script type="text/javascript">
    function drag(obtnf,obtn){        //按鈕及初始值
        var obtn = document.getElementById(obtn),
            obtnf = document.getElementById(obtnf),
            disX = 0,
            disY = 0;        //滑鼠按下時開始計算
        obtn.onmousedown = function(ev){            var ev = ev || window.event;
            disX = ev.clientX - obtnf.offsetLeft;
            disY = ev.clientY - obtnf.offsetTop;            //滑鼠按下並移動時計算
            document.onmousemove = function(ev){                var ev = ev || window.event;
                obtnf.style.left = ev.clientX - disX + 'px';
                obtnf.style.top = ev.clientY - disY + 'px';
            };            //滑鼠鬆開時清除時間
            document.onmouseup = function(){                document.onmousemove = null;                document.onmouseup = null;
            };            return false;
        };
    };    //引用
    drag("box","btn")</script> www.gendan5.com

最後我們們的效果如下

 

做到這裡其實我們們的效果並不完美，應為當我們拖拽的時候發現，他能直接被拖到瀏覽器的外面去了，所以我們們再給他加點限制。

最終JS程式碼如下：

<script type="text/javascript">
    function xianzhi(val,max,min){        if (val > max){            return max;
        }else if(val < min){            return  min;
        }else{            return val;
        }        console.log(val)
    }    function drag(obtnf,obtn){        //按鈕及初始值
        var obtn = document.getElementById(obtn),
            obtnf = document.getElementById(obtnf),
            disX = 0,
            disY = 0;        //滑鼠按下時開始計算
        obtn.onmousedown = function(ev){            var ev = ev || window.event;
            disX = ev.clientX - obtnf.offsetLeft;
            disY = ev.clientY - obtnf.offsetTop;            //滑鼠按下並移動時計算
            document.onmousemove = function(ev){                var ev = ev || window.event;                var lefts= (ev.clientX - disX),
                    tops= (ev.clientY - disY),
                    maxle= (document.documentElement.clientWidth - obtnf.offsetWidth),
                    maxto= (document.documentElement.clientHeight - obtnf.offsetHeight)
                lefts = xianzhi(lefts,maxle,0)
                tops = xianzhi(tops,maxto,0)
                obtnf.style.left = lefts + 'px';
                obtnf.style.top = tops + 'px';
            };            //滑鼠鬆開時清除時間
            document.onmouseup = function(){                document.onmousemove = null;                document.onmouseup = null;
            };            return false;
        };
    };    //引用
    drag("box","btn")

做到這裡一個小型的拖拽效果就出來了。

來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/69946337/viewspace-2657652/，如需轉載，請註明出處，否則將追究法律責任。