很多時(shí)候我們做網(wǎng)站都會(huì)遇到 JS拖拽的需求，今天就按照一個(gè)彈出框拖拽作為一個(gè)小案例寫個(gè)JS原生的代碼。

成都創(chuàng)新互聯(lián)公司專注于企業(yè)全網(wǎng)整合營(yíng)銷推廣、網(wǎng)站重做改版、吳忠網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、H5響應(yīng)式網(wǎng)站、商城網(wǎng)站建設(shè)、集團(tuán)公司官網(wǎng)建設(shè)、成都外貿(mào)網(wǎng)站建設(shè)公司、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性價(jià)比高，為吳忠等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。

按照上面的需求咱們開始制作一個(gè)拖拽效果吧。

第一步、咱們得寫一個(gè)布局和響應(yīng)的css

<div id="box">
    <div id="btn">標(biāo)題</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的為拖拽的區(qū)域。

二、邏輯講述

整個(gè)JS代碼不是很多，當(dāng)鼠標(biāo)按下的時(shí)候獲取鼠標(biāo)的位置和id=box的上距和左邊距，然后計(jì)算目前的位置。

然后這時(shí)候鼠標(biāo)移動(dòng)的時(shí)候再次計(jì)算鼠標(biāo)的位置，然后給id=box位置

當(dāng)鼠標(biāo)按鈕松開的時(shí)候把onmousemove和onmouseup清除掉

三、JS代碼部分

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

最后咱們的效果如下

做到這里其實(shí)咱們的效果并不完美，應(yīng)為當(dāng)我們拖拽的時(shí)候發(fā)現(xiàn)，他能直接被拖到瀏覽器的外面去了，所以咱們?cè)俳o他加點(diǎn)限制。

最終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;        //鼠標(biāo)按下時(shí)開始計(jì)算
        obtn.onmousedown = function(ev){            var ev = ev || window.event;
            disX = ev.clientX - obtnf.offsetLeft;
            disY = ev.clientY - obtnf.offsetTop;            //鼠標(biāo)按下并移動(dòng)時(shí)計(jì)算
            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';
            };            //鼠標(biāo)松開時(shí)清除時(shí)間
            document.onmouseup = function(){                document.onmousemove = null;                document.onmouseup = null;
            };            return false;
        };
    };    //引用
    drag("box","btn")

做到這里一個(gè)小型的拖拽效果就出來(lái)了。

分享文章：原生JS拖拽效果
本文路徑：http://jinyejixie.com/article20/gpepco.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站設(shè)計(jì)、建站公司、、品牌網(wǎng)站建設(shè)、網(wǎng)站導(dǎo)航、網(wǎng)站營(yíng)銷

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)