paquete de arrastre y arrastre js

; ( Función () {
     // 调用私有方法,获取transformar 
    var transformar = getTransform (); 

    la función de arrastrar (selector) {
         este .ELEM = typeof selector === 'objeto'? Selectora: document.getElementById (selector);
         esto . startX = 0 ;
         esta .startY = 0 ;
         esta .sourceX = 0 ;
         esta .sourceY = 0 ;
         esta .init (); 
    } 

    // 原型 
    Drag.prototype = {  
        constructor: Drag,
        init: función() {
             // necesidad de hacer algo al inicializar 
            el presente .setDrag (); 
        }, 
        getStyle: función (propiedad) {
             // sólo se utiliza para obtener las propiedades del elemento actual, similar a la getNombre; 
            retorno document.defaultView.getComputedStyle
                 el documento? .defaultView.getComputedStyle ( el este .ELEM, a falso ) [propiedad] 
                : el este .elem.currentStyle [propiedad] 
        }, 
        // adquirir información de la posición del elemento actual de 
        la getPosition: función () {
             var POS = {X: 0, Y: 0};
            si 
                    };(transformar) {
                 var transformValue = esta .getStyle (transformar);
                si (transformValue === 'none' ) {
                     este .elem.style [transformar] = 'traducir (0,0)' ; 
                } Más {
                     var temp = transformValue.match (? / - \ d + / g); 
                    pos = { 
                        x: parseInt (temp [ 4 ] .trim ()), 
                        y: parseInt (temp [ 5 ] .trim ()) 
                } 
            } más {
                 si ( este .getStyle ( 'posición') == 'estático' ) {
                     este .elem.style.position = 'relativo' ; 
                } Demás { 
                    pos = { 
                        x: parseInt ( esto ? .GetStyle ( 'izquierda') esta .getStyle ( 'izquierda'): 0 ), 
                        y: parseInt ( esto ? .GetStyle ( 'top') esta .getStyle ( 'top '): 0 ) 
                    } 
                }
            } 
            Devolver pos; 
        }, 
        SetPostion: función (pos) {
             si (transformar) {
                 este .elem.style [transformar] = 'translate (' pos.x + 'px,' + + + pos.y 'px)' ; 
            } Demás {
                 este .elem.style.left = pos.x + 'px' ;
                este .elem.style.top = pos.y + 'px' ; 
            } 
        }, 

        // 该方法用来绑定事件 
        setDrag: función () {
             var self = esta ;
            este .elem.addEventListener ( 'mousedown', iniciar, falsa );
            la función de inicio (evento) { 
                self.startX = event.pageX; 
                self.startY = event.pageY; 

                var pos = self.getPosition (); 

                self.sourceX = pos.x; 
                self.sourceY = pos.y; 

                document.addEventListener ( 'mousemove', mover, falsa ); 
                document.addEventListener ( 'mouseup', extremo, falsa ); 
            } 

            función movimiento (evento) {
                 var CurrentX = event.pageX;
                var CurrentY = event.pageY; 

                var distanceX = CurrentX - self.startX;
                 var distanceY = CurrentY - self.startY; 

                // ventana anchura altura 
                var H = window.innerHeight;
                 var = W window.innerWidth; 

                // elemento anchura altura 
                var DW = document.getElementById ( 'Drag' ) .offsetWidth;
                 var DH = document.getElementById ( 'Drag' ) .offsetHeight; 

                // límite determinación 
                self.setPostion ({
                    x: ((self.sourceX  + distanceX) <0 = 0: ((Self? .sourceX + distanceX)> = w - dw) w - dw :? self.sourceX +distanceX) .toFixed (), 
                    y: ((self.sourceY + distanceY) <= 0 0: ((self.sourceY + distanceY)?> = h - dh) h - dh: Cuenta .sourceY + distanceY) .toFixed () 
                }) 
            } 

            la función final (evento) { 
                document.removeEventListener ( 'mousemove' , mover); 
                document.removeEventListener ( 'mouseup' , final);
                // hacer otras cosas 
            } 
        } 
    } 

    // 私有方法,获取transformar的兼容写法
    función getTransform () {
         vartransformar = ''  ,
            divStyle = document.createElement ( 'div' ) .style, 
            transformArr = [ 'transformar', 'webkitTransform', 'MozTransform', 'msTransform', 'OTransform' ], 
            i = 0 , 
            len = transformArr.length ; 

        para (; i <len; i ++ ) {
             si (transformArr [i] en divStyle) {
                 retorno transformar = transformArr [i]; 
            } 
        } 
        Regresar transformar; 
    } 
    // 一种对外暴露的方式 
    ventana.
}) ();

Ver código

// referencias

<! DOCTYPE html > 
< html lang = "en" > 

< cabeza > 
    < meta charset = "UTF-8" > 
    < meta nombre = "ventana" contenido = "width = dispositivo de ancho, inicial escala = 1,0" > 
    < título > documento </ titulo > 
    < estilo > 
        * { 
            padding : 0 ; 
            margen : 0 ;
        
            anchura : 100px ; 
            altura : 100px ; 
            background-color : ladrillos refractarios ; 
            cursor : movimiento ; 
        } 
    </ Estilo > 
</ cabeza > 

< cuerpo > 
    < div ID = "arrastrar" > </ div > 
    < guión src = "js / drag.js" > </ script de > 
    < secuencia de comandos > 
        nueva Drag ( ' arrastre ');
    </ Escritura > 
</ cuerpo > 

</ html >

Ver código

 

// dirección de referencia

https://www.jianshu.com/p/b3dee0e84454