Search code examples
drag-and-droptwitter-bootstrap

Twitter Bootstrap Modal Form: How to drag and drop?

I would like to be able to move around (on the greyed-out background, by dragging and dropping) the modal form that is provided by Bootstrap 2. Can anyone tell me what the best practice for achieving this is?

Solution

  • The bootstrap doesn't come with any dragging and dropping functionality by default, but you can add a little jQuery UI spice into the mix to get the effect you're looking for. For example, using the draggable interaction from the framework you can target your modal ID to allow it to be dragged around within the modal backdrop.

    Try this:

    JS

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

    Demo, edit here.

    Update: bootstrap3 demo