拖拽

梦里梦外; 2022-06-16 12:47 355阅读 0赞

<!DOCTYPE html>
    <html>
    
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style type="text/css">
                body {
                    margin: 0;
                    padding: 0;
                    position: relative;
                }
    
                .box {
                    width: 100px;
                    height: 100px;
                    background: deeppink;
                    position: absolute;
                    left: 25px;
                    top: 25px;
                    cursor: move;
                }
            </style>
            <script type="text/javascript">
                /*
                 * 利用JS面向对象OOP思想实现拖拽封装
                 */
                ;
                (function() {
         
                    //事件处理程序
                    //elem DOM对象  eventName 事件名称  eventType 事件类型
                    function eventHandler(elem, eventName, eventType) {
         
                        // elem.attachEvent 兼容IE9以下事件
                        elem.addEventListener ? elem.addEventListener(eventType, eventName, false) : elem.attachEvent('on' + eventType, eventName);
                    };
                    //移除事件兼容处理
                    function removeEventHandler(elem, eventName, eventType) {
         
                        elem.removeEventListener ? elem.removeEventListener(eventType, eventName) : elem.detachEvent(eventType, eventName);
                    }
                    //获取style属性值
                    function getStyleValue(elem, property) {
         
                        //getComputedStyle、currentStyle 返回CSS样式声明对象([object CSSStyleDeclaration]) 只读
                        //getComputedStyle 支持IE9+以上及正常浏览器
                        //currentStyle 兼容IE8及IE8以下获取目标元素style样式
                        return window.getComputedStyle(elem, null) ? window.getComputedStyle(elem, null)[property] : elem.currentStyle[property];
                    }
                    //被拖拽构造函数
                    function Drag(selector) {
         
                        //elem DOM对象
                        this.elem = typeof selector === 'object' ? selector : document.getElementById(selector);
                        //元素初始化位置
                        this.initObjX = 0;
                        this.initObjY = 0;
                        //鼠标初始化位置
                        this.initMouseX = 0;
                        this.initMouseY = 0;
                        this.isDraging = false;
                        //初始化--鼠标事件操作
                        this._init();
                    }
                    //Drag对象原型
                    Drag.prototype = {
                        constructor: Drag,
                        //初始化
                        //构造原型指回Drag 等价于==>>Drag.prototype._init = function(){}
                        //初始化鼠标事件及鼠标操作流程
                        _init: function() {
         
                            this.setDrag();
                        },
                        //获取目标元素pos位置
                        getObjPos: function(elem) {
         
                            var pos = {
                                x: 0,
                                y: 0
                            };
                            if(getStyleValue(elem, 'position') == 'static') {
                                this.elem.style.position = 'relative';
                                return pos;
                            } else {
                                var x = parseInt(getStyleValue(elem, 'left') ? getStyleValue(elem, 'left') : 0);
                                var y = parseInt(getStyleValue(elem, 'top') ? getStyleValue(elem, 'top') : 0);
                                return pos = {
                                    x: x,
                                    y: y
                                }
                            }
                        },
                        //设置被拖动元素的位置
                        setObjPos: function(elem, pos) {
         
                            elem.style.position = 'absolute';
                            elem.style.left = pos.x + 'px';
                            elem.style.top = pos.y + 'px';
                        },
                        //设置目标元素事件及操作流程
                        setDrag: function() {
         
                            //目标元素对象
                            var self = this;
                            var time = null; //定时器
                            function mousedown(event) {
         
                                event = window.event || event;
                                //鼠标按下时位置
                                this.initMouseX = event.clientX;
                                this.initMouseY = event.clientY;
                                //获取元素初始化位置pos
                                var pos = self.getObjPos(self.elem);
                                this.initObjX = pos.x;
                                this.initObjY = pos.y;
                                //mousemove
                                time = setTimeout(function() {
          //缓解移动卡顿
                                    eventHandler(self.elem, mousemove, "mousemove");
                                }, 25);
                                //mouseup
                                eventHandler(self.elem, mouseup, "mouseup");
                                //按下标识
                                self.isDraging = true;
                            }
    
                            function mousemove(event) {
         
                                event = window.event || event;
                                if(self.isDraging) {
                                    //元素移动位置 == 当前鼠标移动位置 - 鼠标按下位置 + 目标元素初始化位置 
                                    var moveX = event.clientX - this.initMouseX + this.initObjX;
                                    var moveY = event.clientY - this.initMouseY + this.initObjY;
                                    //设置拖拽元素位置
                                    self.setObjPos(self.elem, {
                                        x: moveX,
                                        y: moveY,
                                    });
                                }
                            }
    
                            function mouseup(event) {
         
                                event = window.event || event;
                                self.isDraging = false;
                                clearTimeout(time);
                                //移除事件
                                removeEventHandler(document, mousemove, 'mousemove');
                                removeEventHandler(document, mouseup, 'mouseup');
                            }
                            //mousedown
                            eventHandler(this.elem, mousedown, "mousedown");
                        }
                    }
                    //将Drag挂到全局对象window上
                    window.Drag = Drag;
                })();
            </script>
    
        </head>
    
        <body>
            <div class="box" id="box" style="position: absolute;left: 25px;top: 25px;"></div>
            <script type="text/javascript">
                window.onload = function() {
         
                    new Drag(document.getElementById("box"));
                }
            </script>
        </body>
    
    </html>