js简单拖拽

js简单拖拽

以前学习Vue.js时候老师讲过,今天无意间又看到这个话题,索性就写一份日记吧

        var oDiv = document.getElementById("oDiv"); //oDiv必须使用CSS定位
            oDiv.onmousedown = drag;
            function drag(evt) {
                evt = evt || window.event;
                this.onmouseup = drop;
                this.onmousemove = moveDiv;
                this.offset = {
                    x: evt.offsetX,
                    y: evt.offsetY
                };
            }
            function moveDiv(evt) {
                evt = evt || window.event;
                this.style.left = evt.clientX - this.offset.x + "px";
                this.style.top = evt.clientY - this.offset.y + "px";
            }
            function drop(evt) {
                this.onmouseup = null;
                this.onmousemove = null;
            }
        };
posted @ 2017-03-20 10:17  judy201654321  阅读(114)  评论(0编辑  收藏  举报