Arrastrar y soltar biblioteca confiable

 

Efecto:

 

 HTML:

<! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Transitional // ES" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > 
< html xmlns = "http: / /www.w3.org/1999/xhtml " > 
< head > 
< meta http-equiv =" Content-Type " content =" text / html; charset = utf-8 "  /> 
< title >拖拽 库 靠谱< / title > 
< style type = "text / css" > 
div, h2, p { margin : 0 ; acolchado :{ font : 14px / 1.5 arial } 
#box { ancho : 300px ; altura : 100 px ; fondo : # fef4eb ; acolchado : 5px ; borde : 1px sólido # 666 } 
#box #title { altura : 25px ; fondo : #ccc ; pantalla : bloque en línea ; cursor : mover ; ancho : 100% ; texto alineado: center } 
.content { text-align : center ; line-height : 50px } 
</ style > 

</ head > 
< body > 
< div id = "box" > 
    < span id = "title" >按下 拖拽</ span > 
    < div class = 'content' >内容区</ div > 
</ div > 
<> </ Escritura > 
< secuencia de comandos de tipo = "text / javascript" > 
    // 应用
    var OBOX = document.getElementById ( " caja " );    
    var oTitle = document.getElementById ( " título " );    
    var oDrag =  new Drag (oBox, {handle: oTitle, limit: false });
    </ script > 
</ body > 
</ html >

 

drag.js ：

 

function Drag () { 
    // 初始化
    this.initialize.apply (this, argumentos) 
} 
Drag.prototype = { 
    // 初始化
    initialize: function (drag, options) { 
        this.drag = this. $ (drag); 
        this._x = this._y = 0; 
        this._moveDrag = this.bind (this, this.moveDrag); 
        this._stopDrag = this.bind (this, this.stopDrag); 
        this.setOptions (opciones); 
        this.handle = this. $ (this.options.handle); 
        this.maxContainer = this. $ (this.options.maxContainer); 
        this.maxTop = Math.max (this.maxContainer.clientHeight, this.maxContainer.scrollHeight) - this.drag.offsetHeight;
        this.maxLeft = Math.max (this.maxContainer.clientWidth, this.maxContainer.scrollWidth) - this.drag.offsetWidth; 
        this.limit = this.options.limit;
        this.lockX = this.options.lockX; 
        this.lockY = this.options.lockY; 
        this.lock = this.options.lock; 
        this.onStart = this.options.onStart; 
        this.onMove = this.options.onMove; 
        this.onStop = this.options.onStop; 
        this.handle.style.cursor = "mover"; 
        this.changeLayout (); 
        this.addHandler (this.handle, "mousedown", this.bind (this, this.startDrag)) 
    }, 
    changeLayout: function () { 
        this.drag.style.top = this.drag.offsetTop + "px";
        this.drag.style.left = this.drag.offsetLeft + "px"; 
        this.drag.style.position = "absoluto"; 
        this.drag.style.margin = "0"  
    }, 
    startDrag:        
        var event = event || window.event; 
        this._x = event.clientX - this.drag.offsetLeft; 
        this._y = event.clientY - this.drag.offsetTop; 
        this.addHandler (documento, "mousemove", this._moveDrag); 
        this.addHandler (documento, "mouseup", this._stopDrag); 
        event.preventDefault && event.preventDefault (); 
        this.handle.setCapture && this.handle.setCapture (); 
        this.onStart () 
    }, 
    moveDrag: function (event) { 
        var event = event || ventana. 
        var iTop = event.clientY - this._y; 
        var iLeft = event.clientX - this._x; 
        if (this.lock) return;
        this.limit && (iTop <0 && (iTop = 0), iLeft <0 && (iLeft = 0), iTop> this.maxTop && (iTop = this.maxTop), iLeft> this.maxLeft && (iLeft = this. maxLeft)); 
        this.lockY || (this.drag.style.top = iTop + "px"); 
        this.lockX || (this.drag.style.left = iLeft + "px"); 
        var iWinWidth = document.documentElement.clientWidth; 
        var iWinHeight = document.documentElement.clientHeight; 
        if (this.drag.offsetLeft <0) { 
            this.drag.style.left = 0 + 'px'; 
        } else if (this.drag.offsetLeft> (iWinWidth-this.drag.offsetWidth)) { 
            this.drag.style.left = iWinWidth-this.drag. 
        }
        if (this.drag.offsetTop <0) { 
            this.drag.style.top = 0 + 'px'; 
        } else if (this.drag.offsetTop> (iWinHeight-this.drag.offsetHeight)) { 
            this.drag.style.top = iWinHeight-this.drag.offsetHeight + 'px'; 
        } 
        event.preventDefault && event.preventDefault (); 
        this.onMove () 
    }, 
    stopDrag: function () { 
        this.removeHandler (documento, "mousemove", this._moveDrag); 
        this.removeHandler (documento, "mouseup", this._stopDrag); 
        
        this.handle.releaseCapture && this.handle.releaseCapture (); 
        
        this.onStop () 
    }, 
    // 参数
    设置 setOptions: 
        设置 this.options = { 
            handle: this.drag,
            límite: verdadero, // bloqueo de rango de 
            bloqueo: falso, // bloqueo de posición de bloqueo 
            X: falso, // bloqueo de posición horizontal de bloqueo 
            Y: falso, // bloqueo de posición vertical 
            maxContainer: document.documentElement 
            onStart: function () {}, // Función de devolución de llamada al iniciar 
            onMove: function () {}, // Función de devolución de llamada al arrastrar 
            onStop: function () {} // Función de devolución de llamada al parar 
        }; 
        for (var p en opciones ) this.options [p] = opciones [p] 
    }, 
    // Obtener id 
    $: function (id) 
    { 
        return typeof id === "string"? document.getElementById (id): id
    }, 
    // 添加 绑定 事件
    addHandler: function (oElement, sEventType, fnHandler) 
    { 
        return oElement.addEventListener? oElement.addEventListener (sEventType, fnHandler, false): oElement.attachEvent ("on" + sEventType, fnHandler) 
    }, 
    // 删除 绑定 事件
    removeHandler: function (oElement, sEventType, fnHandler) 
    { 
        return oElementLermo? oElement.removeEventListener (sEventType, fnHandler, false): oElement.detachEvent ("on" + sEventType, fnHandler) 
    }, 
    // 绑定 事件 到 对象
    bind: function (object, fnHandler) 
    { 
        return function () 
        { 
            return fnHandler.apply ( objeto, argumentos)     
        } 
    } 
};