Super Sale Limited Time 50% OFF for All-Access Plans
Save 50% Now

Draggable Bootstrap Modal


Hi Keenthemes,


I've neen reading the doc : https://preview.keenthemes.com/html/metronic/docs/base/modal


I just implemented the draggable modal, wich is a great and wonderfull features...
However I would like to know if there's a way or a snippet that you could give in way that Modal bootstrap would be dragged just by holding the mouse on the Head or Footer of the Modal not the content... since we may want to select a text, labels or words in the content


Thank you so much.


Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (5)


Hi,

You can try to modify the js code and use .modal-header instead of .modal-content.

Please give a try and let us know.

Regards.



Hi Sean Thank for the quick repy.

although Editing the JS code a s you said below didnt work, it was like nothing.

Here's my js snippet afterediting :

if (elmnt.querySelector('.modal-header')) {
// if present, the header is where you move the DIV from:
elmnt.querySelector('.modal-header').onmousedown = dragMouseDown;
} else {
// otherwise, move the DIV from anywhere inside the DIV:
elmnt.onmousedown = dragMouseDown;
}


Any other way to make the Modal be draggable through Header or Footer ?

Thank you



Hi,

We have checked and tested it and it worked well. The above change allows you to drag the entire modal by holding the header.

Please double-check it.

Regards.



Hi Sean,

Thank you so much for the reply.

It didn't worked in my project, but after I forked a index.html and puth the modal and the js script it worked like a charm...

I will take a look to what's cause the issue and get back... (My project modal is dynamic, meaning just one modal for the whole project, it's just the content that differ every time we call the modal, but that's not an issue since it's the same modal id)....

anyway,

Thank you happy



Hi happy,

Noted, glad to help. All the best with your projects!

Regards,


Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(