javascript – Jquery-ui可拖动和动态Jquery-ui可拖动？

这是我从 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可以动态地制作可拖动的组件,你可以在函数iam中使用append看到它.但是新生成的可拖动对象不是拖动的,尽管我已经给出了jquery-ui生成的类.

解决方法

尝试调用$(“.draggable”).draggable();一旦添加了动态创建的元素.

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

原文链接：https://www.f2er.com/jquery/154133.html

javascript – Jquery-ui可拖动和动态Jquery-ui可拖动？

解决方法

猜你在找的jQuery相关文章