使用js實(shí)現(xiàn)的簡單拖拽效果

2019-11-20 12:54:32

字體：大中小

供稿：網(wǎng)友

前端開發(fā)的時(shí)候，有好多地方用到拖拽效果,當(dāng)然 http://jqueryui.com/draggable/ 是個(gè)不錯(cuò)的選擇,but 我是個(gè)打破砂鍋問到底的人，抽點(diǎn)時(shí)間用js小小的實(shí)現(xiàn)了類似的插件，話不多說。

　first:　html和css

復(fù)制代碼代碼如下:

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        #div1 {
            position: absolute;
            width: 100px;
            height: 100px;
            cursor: move;
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="div1">
    </div>
</body>
</html>

now,先把主要算法實(shí)現(xiàn)一下：

復(fù)制代碼代碼如下:

 <script>
        window.onload = function () {
            //獲取需要拖拽的div
            var div1 = document.getElementById("div1");
            //添加鼠標(biāo)按下事件
            div1.onmousedown = function (evt) {
                var oEvent = evt || event;
                //獲取按下鼠標(biāo)到div left  top的距離
                var distanceX = oEvent.clientX - div1.offsetLeft;
                var distanceY = oEvent.clientX - div1.offsetTop;
                //添加doc滑動(dòng)時(shí)間
                document.onmousemove = function (evt) {
                    var oEvent = evt || event;
                    //重新計(jì)算div的left top值
                    var left = oEvent.clientX - distanceX;
                    var top = oEvent.clientY - distanceY;
                    //left  當(dāng)小于等于零時(shí)，設(shè)置為零 防止div拖出document之外
                    if (left <= 0) {
                        left = 0;
                    }
                    //當(dāng)left 超過文檔右邊界  設(shè)置為右邊界
                    else if (left >= document.documentElement.clientWidth - div1.offsetWidth) {
                        left = document.documentElement.clientWidth - div1.offsetWidth;
                    }
                    if (top <= 0) {
                        top = 0;
                    }
                    else if (top >= document.documentElement.clientHeight - div1.offsetHeight) {
                        top = document.documentElement.clientHeight - div1.offsetHeight;
                    }
                    //重新給div賦值
                    div1.style.top = top + "px";
                    div1.style.left = left + "px";
                }
                //添加鼠標(biāo)抬起事件
                div1.onmouseup = function () {
                    //清空事件
                    document.onmousemove = null;
                    div1.onmouseup = null;
                }
            }
        }
    </script>

yeah,使用面向?qū)ο髮?shí)現(xiàn)一下

復(fù)制代碼代碼如下:

<style>
        * {
            margin:0;
            padding:0;
        }
        #div1 {
            width: 100px;
            height: 100px;
            background-color: red;
        }
        #div2 {
            background-color:yellow;
            width:100px;
            height:100px;
        }
    </style>
<div id="div1"></div>
<div id="div2"></div>

js Draggle class:

復(fù)制代碼代碼如下:

 function Drag(id) {
            this.div = document.getElementById(id);
            if (this.div) {
                this.div.style.cursor = "move";
                this.div.style.position = "absolute";
            }
            this.disX = 0;
            this.disY = 0;
            var _this = this;
            this.div.onmousedown = function (evt) {
                _this.getDistance(evt);
                document.onmousemove = function (evt) {
                    _this.setPosition(evt);
                }
                _this.div.onmouseup = function () {
                    _this.clearEvent();
                }
            }
        }
        Drag.prototype.getDistance = function (evt) {
            var oEvent = evt || event;
            this.disX = oEvent.clientX - this.div.offsetLeft;
            this.disY = oEvent.clientY - this.div.offsetTop;
        }
        Drag.prototype.setPosition = function (evt) {
            var oEvent = evt || event;
            var l = oEvent.clientX - this.disX;
            var t = oEvent.clientY - this.disY;
            if (l <= 0) {
                l = 0;
            }
            else if (l >= document.documentElement.clientWidth - this.div.offsetWidth) {
                l = document.documentElement.clientWidth - this.div.offsetWidth;
            }
            if (t <= 0) {
                t = 0;
            }
            else if (t >= document.documentElement.clientHeight - this.div.offsetHeight) {
                t = document.documentElement.clientHeight - this.div.offsetHeight;
            }
            this.div.style.left = l + "px";
            this.div.style.top = t + "px";
        }
        Drag.prototype.clearEvent = function () {
            this.div.onmouseup = null;
            document.onmousemove = null;
        }

at last：最終實(shí)現(xiàn)：

復(fù)制代碼代碼如下:

  window.onload = function () {
            new Drag("div1");
            new Drag("div2");
        }

效果如下:

以上所述就是本文的全部內(nèi)容了，希望能對(duì)大家更加熟練的掌握javascript有所幫助。

上一篇：JavaScript中的依賴注入詳解

下一篇：使用純javascript實(shí)現(xiàn)放大鏡效果

學(xué)習(xí)交流

索泰發(fā)布一款GTX 1070 Mini迷你版本:小機(jī)

索泰發(fā)布一款GTX 1070 Mini迷你版本:小機(jī)箱大愛...

熱門圖片

猜你喜歡的新聞

猜你喜歡的關(guān)注

新聞熱點(diǎn)

榮耀總裁趙明烏鎮(zhèn)演講：榮耀首款5G手機(jī)V30下月發(fā)布

2019-10-23 09:17:05

搜狐張朝陽：回歸媒體是搜狐重新崛起的關(guān)鍵

2019-10-21 09:20:02

華為輪值董事長郭平：虛擬技術(shù)創(chuàng)造現(xiàn)實(shí)價(jià)值

2019-10-21 09:00:12

滴滴英文服務(wù)上線兩周年用戶已超200萬

2019-09-26 08:57:12

華為推出全球至快AI訓(xùn)練集群Atlas900

2019-09-25 08:46:36

馬斯克：特斯拉正組建中國技術(shù)團(tuán)隊(duì)

2019-09-25 08:15:43

疑難解答

圖片精選

網(wǎng)友關(guān)注

国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

使用js實(shí)現(xiàn)的簡單拖拽效果