angularjs jquery-ui bootstrap - draggable div (modal window)

[bull.christo...@gmail.com]

Hello,

We are trying to drag a div (bootstrap modal window).

We were able to make it working properly with this config : http://plnkr.co/edit/TyWXUe?p=preview (FINE)

But this one is not working http://plnkr.co/edit/6QXhjj?p=preview (NOT WORKING with angularjs include) (the modal window is not moving at all)

Is there any conflict known between angularjs and jquery-ui (issue with draggable!)?

How can we make working properly our second plunk!?

Thanks for your help

Christophe

[dlo...@googlemail.com]

Don't think thats a good idea to put $("#myModal").draggable(); directly in a js-file loaded in head. For illustration, if you put this into the controller, your second plunk works as aspected. But it isn't clean to leave it there. Try using a directive with a directive for example: http://plnkr.co/edit/jHS4SJ?p=preview 

[dlo...@googlemail.com]

I forgot to say why. Your head-loaded scripts starts before your DOM is ready, so '#myModal' isn't available in the moment. With these directives, you can attach 'dragable' to a HTML-element and it's feature 'dragable' is added when it gets rendered with angular. At this moment, your DOM was already ready.

PS: excuse my poor english :)

[bull.christo...@gmail.com]

Thanks a lot for your answer.

Your point helps me a lot !!

Best Regards

Christophe