Home/ Questions/Q 6642215
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T23:54:16+00:00

This is my code taken from http://jqueryui.com/demos/draggable/ <!DOCTYPE html> <html lang=en> <head> <meta charset=utf-8>

  • 0

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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

    • 0