jquery-ui可拖动和动态的jquery-ui可拖动吗？

这是从http://jqueryui.com/demos/draggable/jquery-ui可拖动和动态的jquery-ui可拖动吗？

<!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使用追加看到了我的代码。但新生成的可驯服的对象不是拖动，虽然我给了jquery-ui生成的类。

来源

2011-10-05 Human Love

尝试调用$(".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

来源

2011-10-05 11:37:48

感谢呼吁再次拖动后解决这个问题非常感谢你。非常感谢。 –

不要忘记包含您的代码以备将来参考。 – Jeffrey

This works .. +1 –

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

来源

2012-01-15 17:49:32

实际上我要说因为性能原因，改用：

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

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

jQuery的具体问题没有错。

UPDATE

没有指定要使用此为其实例。基于里卡多的编辑：

$(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类。你不需要那样做。事实上，这使得我说的不起作用。

来源

2012-01-18 01:11:28

我会建议做这样的，因为如果你想配置对象传递给拖动功能，你就不必再重复它在两个不同的地方：

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

来源

2016-02-14 12:23:06 user3791372

jquery-ui可拖动和动态的jquery-ui可拖动吗？

回答

相关问题