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可拖動嗎？

回答

相關問題