Jquery-ui draggable and dynamic Jquery-ui draggable?_问答_开发者

Jquery-ui draggable and dynamic Jquery-ui draggable?

开发者 https://www.devze.com 2023-04-11 10:30 出处：网络

This is my code taken from http://jqueryui.com/demos/draggable/ <!DOCTYPE html> <html lang=\"en\">

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">
  &开发者_运维技巧lt;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 making draggable component dynamically as you can see in function iam using append. But newly generated drggable object is not dragging although i have given the jquery-ui generated classes.

try calling $( ".draggable" ).draggable(); once the dynamically created element is added.

$(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

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

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

This will prevent attempting to re-initialize already draggable elements using jQuery UI's built in class. Also, if your code down the road modifies the properties of an individual draggable that may not match the properties of a new draggable, you could end up with some being reset.

Nothing wrong with being specific with jQuery.

UPDATE

Didn't specify for which instance to use this. Based on Ricardo's 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'm also now seeing you were manually adding the ui-draggable class. You don't need to do that. In fact, it makes what I said not work.

<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>

Just a need for position changing is needed

<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>

I would recommend doing it like this because if you want to pass a configuration object to the draggable function, you won't 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>