首页 > 代码库 > 用javaScript实现拖拽效果

用javaScript实现拖拽效果

2024-09-18 00:23:46   217人阅读

<!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实现拖拽效果


联系
我们