drag and drop - example - Formulario Modal Bootstrap de Twitter: ¿Cómo arrastrar y soltar?

modal html

Question

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

Answer 1

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

Answer 2

Puedes usar un pequeño guión como este.

simplificado desde Arrastrable sin 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"). modal (). drags ({handle: ". modal-header"});

Answer 3

jquery UI es grande y puede entrar en conflicto con bootstrap.

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

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

Todavía tiene que ocuparse de las transiciones, como sugiere @ user535673. Solo elimino la clase de fundido de mi diálogo.

Answer 4

El programa de arranque no viene con ninguna funcionalidad de arrastrar y soltar de manera predeterminada, pero puedes agregar un poco de jQuery UI spice en la mezcla para obtener el efecto que estás buscando. Por ejemplo, usando la interacción que se puede 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: demostración de bootstrap3