CODEWITHSUNDEEP
jquerycssjquery-uijquery-ui-draggable
linux developer
linux developer

Reputation: 831

How to make future element draggable using Jquery

I am reading the below api will make the currently available element on a page draggable.

$( ".draggable" ).draggable({ containment: "parent" });

but in my case I will be constructing new elements based on the user action. Like I will allow them to insert a text box over a image which should be draggable as well.

Is there a mechanism where I can attach this draggable feature using jquery using ".on()" ?

OR

I have to execute $( "this" ).draggable({ containment: "parent" }); every time when I create a new element?

Thanks for reading

Upvotes: 3

Views: 827

Answers (1)

Kevin B
Kevin B

Reputation: 95027

Is there a mechanism where i can attach this draggable feature using jquery using ".on()" ?

No (well, technically yes), you'll have to make each element draggable after you create it, or after some event that happens after it is created (such as mouseenter)

$(document).on("mouseenter", ".draggable:not(.initiated)", function() {
    $(this).draggable({ containment: "parent" }).addClass("initiated");
});

the initiated class prevents re-initializing the draggable every time you mouse over.

Note, you should use a better ancestor than document since mousenter is an event that will happen often on the document (will happen any time any element in the dom is moused into).

Upvotes: 8

Related Questions