make bootstrap twitter dialog modal draggable

Question

I m trying to make bootstrap twitter dialog modal draggable with this jquery plugin   http   threedubmedia com code event drag demos  but it doesn t work   var  div      html    console debug     drag         modalTest        drag  start   function ev  dd            dd limit    div offset            dd limit bottom   dd limit top    div outerHeight   -   this  outerHeight            dd limit right   dd limit left    div outerWidth   -   this  outerWidth                drag function ev  dd              this  css               top  Math min dd limit bottom  Math max dd limit top  dd offsetY                 left  Math min dd limit right  Math max dd limit left  dd offsetX                          Have you idea how can I do it

User · Answer

You can use the code below if you dont want to use jQuery UI or any third party pluggin. It's only plain jQuery.

This answer works well with Bootstrap v3.x . For version 4.x see @User comment below

_x000D_

$(".modal").modal("show");_x000D_
_x000D_
$(".modal-header").on("mousedown", function(mousedownEvt) {_x000D_
    var $draggable = $(this);_x000D_
    var x = mousedownEvt.pageX - $draggable.offset().left,_x000D_
        y = mousedownEvt.pageY - $draggable.offset().top;_x000D_
    $("body").on("mousemove.draggable", function(mousemoveEvt) {_x000D_
        $draggable.closest(".modal-dialog").offset({_x000D_
            "left": mousemoveEvt.pageX - x,_x000D_
            "top": mousemoveEvt.pageY - y_x000D_
        });_x000D_
    });_x000D_
    $("body").one("mouseup", function() {_x000D_
        $("body").off("mousemove.draggable");_x000D_
    });_x000D_
    $draggable.closest(".modal").one("bs.modal.hide", function() {_x000D_
        $("body").off("mousemove.draggable");_x000D_
    });_x000D_
});

_x000D_

.modal-header {_x000D_
    cursor: move;_x000D_
}

_x000D_

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>_x000D_
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>_x000D_
_x000D_
<div class="modal fade" tabindex="-1" role="dialog">_x000D_
  <div class="modal-dialog" role="document">_x000D_
    <div class="modal-content">_x000D_
      <div class="modal-header">_x000D_
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>_x000D_
        <h4 class="modal-title">Modal title</h4>_x000D_
      </div>_x000D_
      <div class="modal-body">_x000D_
        <p>One fine body&hellip;</p>_x000D_
      </div>_x000D_
      <div class="modal-footer">_x000D_
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>_x000D_
        <button type="button" class="btn btn-primary">Save changes</button>_x000D_
      </div>_x000D_
    </div><!-- /.modal-content -->_x000D_
  </div><!-- /.modal-dialog -->_x000D_
</div>

_x000D_

User · Answer

In my case I am enabling draggable  It works   var bootstrapDialog   new BootstrapDialog       title   Message       draggable  true      closable  false      size  BootstrapDialog SIZE WIDE      message   Hello World       buttons              label   close            action  function  dialogRef                 dialogRef close                            bootstrapDialog open      Might be it helps you

User · Answer

use the jquery UI draggable  much simpler http   jqueryui com draggable

User · Answer

In my own case  i had to set backdrop and set the top and left properties before i could apply draggable function on the modal dialog  Maybe it might help someone     if        modal in   length                modal-dialog   css        top  0       left  0              myModal   modal     backdrop  false     show  true          modal-dialog   draggable     handle    modal-header

User · Answer

i did this       myModal   modal     draggable      and it make my very standard basic modal draggable   not sure how why it worked  but it did

User · Answer

Like others said  the simpliest solution is just call draggable   function from jQuery UI  just after showing modal       my-modal   modal  show                  draggable   handle    modal-header        But there is a several problems with compatibility between Bootstrap and jQuery UI so we need some addition fixes in css    modal       overflow  hidden     modal-dialog      margin-right  0      margin-left  0     modal-header          not necessary but imo important for user        cursor  move

User · Answer

myModal   draggable       handle    modal-header         it works for me  I got it from there  if you give me thanks please give 70  to Andres Ilich

User · Answer

For the mouse cursor  with jQuery UI          my-modal   draggable       handle    modal-header        For the touch cursor  with jQuery     var box   null  var touchobj   null  var position     x  0   y  0   var positionbox     x  0   y  0       init touch     modal-header   on  touchstart   function e       box     this  closest   modal-dialog        touchobj   e changedTouches 0           take position touch cursor     position  x     touchobj pageX      position  y     touchobj pageY         take original position box to move with touch     positionbox  x     parseInt box css  left         positionbox  y     parseInt box css  top          e preventDefault            on move touch     modal-header   on  touchmove   function e       var dist     x  0   y  0       touchobj   e changedTouches 0           we calculate the distance of move     dist  x     parseInt touchobj clientX  - position  x        dist  y     parseInt touchobj clientY  - position  y            we apply the movement distance on the box     box css  left   positionbox  x   dist  x     px        box css  top   positionbox  y   dist  y     px         e preventDefault          The addition of the 2 solutions is compatible

User · Answer

The top-ranked solution  by Mizbah Ahsan  is not quite right    but is close   If you apply draggable   to the modal dialog element  the browser window scroll bars will drag around the screen as you drag the modal dialog   The way to fix that is to apply draggable   to the modal-dialog class instead       modal-dialog   draggable       handle    modal-header        Thanks

[jquery] make bootstrap twitter dialog modal draggable

Examples related to jquery

Examples related to twitter-bootstrap

Examples related to draggable

[jquery] make bootstrap twitter dialog modal draggable

Examples related to jquery

Examples related to twitter-bootstrap

Examples related to modal-dialog

Examples related to draggable