Best IT Recipes

Jquery-ui draggable and dynamic jquery-ui draggable?

This is my code taken from http://jqueryui.com/demos/draggable/

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Draggable - Default functionality</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> <script src="../../jquery-1.6.2.js"></script> <script src="../../ui/jquery.ui.core.js"></script> <script src="../../ui/jquery.ui.widget.js"></script> <script src="../../ui/jquery.ui.mouse.js"></script> <script src="../../ui/jquery.ui.draggable.js"></script> <link rel="stylesheet" href="../demos.css"> <style> .draggable { width: 150px; height: 150px; padding: 0.5em; } </style> <script> $(function() { $( ".draggable" ).draggable(); $('.content').click(function(){ var htmlData='<div class="draggable ui-widget-content ui-draggable"><p>Drag me around</p></div>'; $('.demo').append(htmlData); }); }); </script> </head> <body> <div class="demo"> <div class="draggable ui-widget-content"> <p>Drag me around</p> </div> <div class="content">Test </div> </div><!-- End demo --> </body> </html>

Iam dynamically drags a component, as you can see in the iam function using append. But the newly created drggable object is not draggable, although I gave the jquery-ui classes generated.

+9
javascript jquery jquery-ui
Oct 05 '11 at 11:31
source share
4 answers

try calling $( ".draggable" ).draggable(); after adding a dynamically created item.

 $(function() { $( ".draggable" ).draggable(); $('.content').click(function(){ var htmlData='<div class="draggable ui-widget-content ui-draggable"><p>Drag me around</p></div>'; $('.demo').append(htmlData); $( ".draggable" ).draggable(); }); });

Working demo

+16
05 Oct 2018-11-11T00:
source share

I'm going to say for performance reasons, I use instead:

 $('.draggable:not(.ui-draggable)').draggable();

This will prevent attempts to reinitialize already draggable items using the jQuery UI built into the class. In addition, if your code changes the properties of a single draggable object along the way, which may not correspond to the properties of a new draggable object, you may end up resetting with someone.

There is nothing wrong with being specific with jQuery.

UPDATE

Did not indicate for which instance to use this. Based on Ricardo Edit:

 $(function() { $( ".draggable" ).draggable(); $('.content').click(function(){ var htmlData='<div class="draggable ui-widget-content"><p>Drag me around</p></div>'; $('.demo').append(htmlData); $('.draggable:not(.ui-draggable)').draggable(); //Here }); });

I also see that you manually added the ui-draggable class. You do not need to do this. In fact, this does what I said does not work.

+4
Jan 18 '12 at 1:11
source share
 <script> $(function() { $(".draggable").draggable(); $(".content").click(function(){ var htmlData='<div class="draggable ui-widget-content ui-draggable"><p>Drag me around</p></div>'; $(".demo").append(htmlData); }); }); </script>

Need to change position

 <script> $(function() { $(".content").click(function(){ var htmlData='<div class="draggable ui-widget-content ui-draggable"><p>Drag me around</p></div>'; $(".demo").append(htmlData); $(".draggable").draggable(); //bring it here so that for the newly inserted/created dom elements, jquery draggable can be initialized. }); }); </script>
0
Jan 15 2018-12-17T00:
source share

I would recommend doing it this way, because if you want to pass the configuration object to the drag and drop function, you do not have to repeat it in two different places:

 <script> $(function() { setDraggable(); $('.content').click(function(){ var htmlData='<div class="draggable ui-widget-content ui-draggable"><p>Drag me around</p></div>'; $('.demo').append(htmlData); setDraggable(); }); }); function setDraggable(){ $( ".draggable" ).draggable(); } </script>
0
Feb 14 '16 at 12:23
source share


More articles:


All Articles