用javaScript实现拖拽效果

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了用javaScript实现拖拽效果相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #box{
            position: absolute;
            width: 200px;
            height: 200px;
            background: red;
        }
    </style>
    <script>
        window.onload=function(){
            var drag=new Drag("box")
            drag.init();
        }
        //构造函数Drag
        function Drag(id){
            this.obj=document.getElementById(id);
            this.disX=0;
            this.disY=0;
        }
        Drag.prototype.init = function (){
            var me = this;
            this.obj.onmousedown = function (e){  
                var e = e || event;
                me.mouseDown(e);
                // 阻止默认事件
                return false;
            };
        };
        Drag.prototype.mouseDown=function(e){          
            var me=this;
            this.disX = e.clientX - this.obj.offsetLeft;
            this.disY = e.clientY - this.obj.offsetTop;
            document.onmousemove=function(e){
                var e=e||window.event;
                me.mouseMove(e);
            };
            document.onmouseup = function (){
            me.mouseUp();
         }
        }
        Drag.prototype.mouseMove = function (e){
            this.obj.style.left = (e.clientX - this.disX) + ‘px‘;
            this.obj.style.top = (e.clientY - this.disY) + ‘px‘;
        };
        Drag.prototype.mouseUp = function (){
            document.onmousemove = null; //如果不卸载这个事件的话，鼠标抬起后，移动鼠标，div依然会移动。
            document.onmouseup = null;
        };

 

以上是关于用javaScript实现拖拽效果的主要内容，如果未能解决你的问题，请参考以下文章

Javascript之实现登录框拖拽效果

用javascript实现拖拽带来的种种问题

javascript动画系列第一篇——模拟拖拽

JavaScript实现最简单的拖拽效果

用 JavaScript 实现手势库 - 实现监听逻辑前端组件化

用 JavaScript 实现手势库 - 实现监听逻辑前端组件化