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

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

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

User · Answer

use the jquery UI draggable  much simpler http   jqueryui com draggable

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

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

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   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   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt script src  https   maxcdn bootstrapcdn com bootstrap 3 3 7 js bootstrap min js  gt  lt  script gt  x000D   lt link href  https   maxcdn bootstrapcdn com bootstrap 3 3 7 css bootstrap min css  rel  stylesheet   gt  x000D   x000D   lt div class  modal fade  tabindex  -1  role  dialog  gt  x000D     lt div class  modal-dialog  role  document  gt  x000D       lt div class  modal-content  gt  x000D         lt div class  modal-header  gt  x000D           lt button type  button  class  close  data-dismiss  modal  aria-label  Close  gt  lt span aria-hidden  true  gt  amp times  lt  span gt  lt  button gt  x000D           lt h4 class  modal-title  gt Modal title lt  h4 gt  x000D         lt  div gt  x000D         lt div class  modal-body  gt  x000D           lt p gt One fine body amp hellip  lt  p gt  x000D         lt  div gt  x000D         lt div class  modal-footer  gt  x000D           lt button type  button  class  btn btn-default  data-dismiss  modal  gt Close lt  button gt  x000D           lt button type  button  class  btn btn-primary  gt Save changes lt  button gt  x000D         lt  div gt  x000D       lt  div gt  lt  --   modal-content -- gt  x000D     lt  div gt  lt  --   modal-dialog -- gt  x000D   lt  div gt  x000D   x000D   x000D

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

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

[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