Biblioteca arrastar e soltar confiável

 

Efeito:

 

 HTML:

<! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Transitional // PT" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > 
< html xmlns = "http: / /www.w3.org/1999/xhtml " > 
< head > 
< meta http-equiv =" Tipo de conteúdo " content =" text / html; charset = utf-8 "  /> 
< title >拖拽 库 靠谱< / title > 
< style type = "text / css" > 
div, h2, p { margem : 0 ; estofamento :{ font : 14px / 1,5 arial } 
#box { width : 300px ; altura : 100px ; fundo : # fef4eb ; estofamento : 5px ; borda : 1 px sólido # 666 } 
#box #title { height : 25px ; fundo : #ccc ; display : bloco embutido ; cursor : mover ; largura : 100% ; alinhamento de texto: center } 
.content { alinhamento de texto : center ; altura da linha : 50 px } 
</ style >

</ head > 
< body > 
< div id = "box" > 
    < span id = "title" >拖拽 拖拽</ span > 
    < div class = 'conteúdo' >区/ </ div > 
</ div > 
< script src = 'drag.js' > </ script > 
< tipo de script = "text / javascript" >// Aplicar var oBox = document.getElementById ( "
    
    caixa " );    
     var oTitle = document.getElementById ( " title " );    
     var oDrag =  new Drag (oBox, {handle: oTitle, limit: false });
     </ script > 
</ body > 
</ html >

 

drag.js:

 

função Drag () {
    // Inicializar
    this.initialize.apply (this, argument)
}
Drag.prototype = {
    // Inicializar
    initialize: function (arrastar, opções) {
        this.drag = this. $ (arrastar);
        this._x = this._y = 0;
        this._moveDrag = this.bind (this, this.moveDrag);
        this._stopDrag = this.bind (this, this.stopDrag);
        this.setOptions (opções);
        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: function (evento) {        
        evento var = evento || 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 (evento) {
        evento var = evento || window.event;
        var iTop = event.clientY - this._y;
        var iLeft = event.clientX - this._x;
        if (this.lock) return;
        Este é o limite máximo de um número de caracteres que você pode usar para definir o número de caracteres que você deseja que ele seja. 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.offsetWidth + 'px';
        }
        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 ()
    }
    // Configuração de parâmetros
    setOptions: function (opções) {
        this.options = {
            handle: this.drag, // objeto de evento
            limite: verdadeiro, // Bloquear intervalo
            lock: false, // posição de bloqueio
            lockX: false, // Bloquear posição horizontal
            lockY: false, // Bloqueia a posição vertical
            maxContainer: document.documentElement || document.body, // Especifique o contêiner de limite
            onStart: function () {}, // Função de retorno de chamada no início
            onMove: function () {}, // Função de retorno de chamada ao arrastar
            onStop: function () {} // Função de retorno de chamada quando parada
        };
        para (var p em opções) this.options [p] = options [p]
    }
    // Obter id
    $: função (id)
    {
        retornar typeof id === "string"? document.getElementById (id): id
    }
    // Adicionar evento de ligação
    addHandler: function (oElement, sEventType, fnHandler)
    {
        retornar oElement.addEventListener? oElement.addEventListener (sEventType, fnHandler, false): oElement.attachEvent ("on" + sEventType, fnHandler)
    }
    // Excluir eventos de ligação
    removeHandler: function (oElement, sEventType, fnHandler)
    {
        retornar oElement.removeEventListener? oElement.removeEventListener (sEventType, fnHandler, false): oElement.detachEvent ("on" + sEventType, fnHandler)
    }
    // Vincular eventos a objetos
    bind: função (objeto, fnHandler)
    {
        função de retorno ()
        {
            retornar fnHandler.apply (objeto, argumentos)    
        }
    }
};