Question

这是我从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中看到使用append。但是新生成的drggable对象并没有拖动，尽管我已经给出了jquery-ui生成的类。

Answer 1

在添加动态创建的元素后尝试调用$( ".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

Answer 2

我实际上是出于性能原因而说，而是使用：

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

这将阻止尝试使用jQuery UI的内置类重新初始化已经可拖动的元素。此外，如果你的代码修改了可能与新的draggable属性不匹配的单个draggable的属性，你可能最终会重置一些。

具体使用jQuery没有错。

<强>更新

未指定使用此实例的实例。基于里卡多的编辑：

$(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
        });
   });

我现在也看到你手动添加了ui-draggable类。你不需要这样做。事实上，它使我说的不起作用。

Answer 3

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

需要改变职位

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

Answer 4

我建议这样做，因为如果你想将一个配置对象传递给draggable函数，你就不必在两个不同的地方重复它：

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

Jquery-ui可拖动且动态的Jquery-ui可拖动？

4 个答案: