jQuery UI make inline added elements draggable

Hello,

I have something like this

$(".myDiv").draggable({DIFFERENT_OPTIONS_HERE});

Now, at some points in my application, I am adding more divs

$("#container").prepend('<div class='.myDiv'></div>

But these new divs are not becoming draggable; I would like to have a way to make them draggable, without having to initiate .draggable() again after they are added to the container.

Thank you

Your issue seems to be with the following

$("#container").prepend('<div class='.myDiv'></div>

First the code is include, second, the syntax throws an error, and lastly, if it were correct, the fact that you have .myDiv is incorrect for the class name.

It should be

$("#container").prepend('<div class="myDiv"></div>');

Sorry these are typos when typing codes here, in my actual code I of course closed the prepend(); and didn’t use class=‘.myClass’.

I think you will need to use .delegate()

$('.myDiv').delegate('mouseover', function() { $(this).draggable({DIFFERENT_OPTIONS_HERE}); });

Stackflow has a few good implementation too at http://stackoverflow.com/questions/1805210/jquery-drag-and-drop-using-live-events

As of jQuery 1.7, delegate has been superceeded by the on method.
See the Direct and Delegated events section there for details.


$('.myDiv').on('mouseover', function() {
    $(this).draggable({DIFFERENT_OPTIONS_HERE});
});