Twitter Modalidad Bootstrap: cómo arrastrar y soltar?

Question

Me gustaría poder moverme (en el fondo gris, arrastrando y soltando) el formulario modal proporcionado por Bootstrap 2. ¿Alguien me puede decir cuál es la mejor práctica para lograr esto?

Answer 1

El programa de arranque no viene con ninguna función de arrastrar y soltar de forma predeterminada, pero puede agregar un poco de jQuery UI spice en la mezcla para obtener el efecto que está buscando. Por ejemplo, utilizando la interacción draggable del marco, puede orientar su ID modal para permitir que se arrastre en el fondo modal.

Prueba esto:

JS

$("#myModal").draggable({ 
    handle: ".modal-header" 
}); 

Demo, editar here.

Actualización: bootstrap3 demo

Answer 2

Cualquiera sea la opción de ir para arrastrable, es posible que desee desactivar las propiedades de *-transition.modal.fade en el archivo CSS de arranque, o al menos escribir algo de JS que los desactiva temporalmente durante el arrastre. De lo contrario, el modal no se arrastra exactamente como cabría esperar.

Answer 3

jquery UI es grande y puede entrar en conflicto con el arranque.

Una alternativa es DragDrop.js: http://kbjr.github.io/DragDrop/index.html

DragDrop.bind($('#myModal')[0], { 
    anchor: $('#myModal .modal-header') 
}); 

Usted todavía tiene que hacer frente a las transiciones, como sugiere @ user535673. Solo elimino la clase de fundido de mi diálogo.

Answer 4

Puede usar un pequeño script que le guste.

simplificado de Draggable without jQuery UI

(function ($) { 
     $.fn.drags = function (opt) { 

      opt = $.extend({ 
       handle: "", 
       cursor: "move" 
      }, opt); 

      var $selected = this; 
      var $elements = (opt.handle === "") ? this : this.find(opt.handle); 

      $elements.css('cursor', opt.cursor).on("mousedown", function (e) { 
       var pos_y = $selected.offset().top - e.pageY, 
        pos_x = $selected.offset().left - e.pageX; 
       $(document).on("mousemove", function (e) { 
        $selected.offset({ 
         top: e.pageY + pos_y, 
         left: e.pageX + pos_x 
        }); 
       }).on("mouseup", function() { 
        $(this).off("mousemove"); // Unbind events from document     
       }); 
       e.preventDefault(); // disable selection 
      }); 

      return this; 

     }; 
    })(jQuery); 

ejemplo: $ ("# someDlg") modales() caladas ({mango: "modal-header"})..;