JQuery - 如何在每次按下按鈕時創建新的可拖動div div

Question

使用JQuery，我需要能夠按下按鈕並創建可拖動的div。我的代碼如下

我有以下樣式體內

<style> 
     #draggable { 
      width: 100px; 
      height: 100px; 
      background: #ccc; 
     } 
    </style> 

這就是我想要的div來放置容器，並應創建新的div的按鈕。當我在頁面加載時創建div時，它是可拖動的，並按預期工作。

<container id="area"> 
     <a class="btn btn-primary" id="create_block">Create</a> 
     <div id="draggable">Draggable</div> 
    </container> 

然後我在創建按鈕點擊的代碼，從我的理解，使所有的事情ID =「拖動」可拖動可拖動身體這個腳本。

<script> 
     $("#create_block").click(function() { 
      $('<div/>').attr({ 
       'id' : 'draggable' 
      }).appendTo("#area"); 
     }); 

     $('#draggable').draggable(); 
    </script> 

當我點擊按鈕時，它會創建一個樣式正確的div，但它不可拖動。

我不確定什麼不適用於此。我已經看過類似事物的一些不同的例子，但似乎這應該起作用。我錯過了什麼？我正在使用bootstrap，但沒有其他框架。

如何創建一個新的div，並通過按下按鈕創建所有其他的可拖動的？

Answer 1

例這裏http://jsfiddle.net/eb34jztf/

您需要啓動拖動到每個新創建的元素，並請以後不要在一個頁面上使用相同的ID值:)

$("#create_block").click(function() { 
$('<div/>').attr({ 
    'class': 'draggable' 
}).draggable().appendTo("#area"); 
    //initiate draggable on every new created elements 
}); 


//Don't need this part if the draggable elements are only created on click 
$('.draggable').draggable(); // initiate the first draggable element that you already have 

Answer 2

雖然起初看起來很不直觀，但你的$('#draggable').draggable()調用並沒有做你認爲它正在做的事情。這並不是說「使所有元素的id爲draggable可拖動」。

它所做的是執行選擇以返回頁面上匹配#draggable的所有元素。然後，您將一個名爲draggable的方法應用於每個元素。此時執行完成。沒有聽衆正在持續運作。

當你創建一個新的元素時，你需要確保它也可以拖動，如果你想要的話。事情是這樣的：（注意.draggable()鏈創造新的元素）

<script> 
    $("#create_block").click(function() { 
     $('<div/>').attr({ 
      'id' : 'draggable' 
     }).appendTo("#area").draggable(); 
    }); 

    $('#draggable').draggable(); 
</script> 

由於該元素根本不存在你第一次做它拖動它不包括第一位的復飛。

此外，有點無關，但除非你在添加第二個可拖動的div之前刪除第一個可拖動的div，你會想爲你的元素選擇一個唯一的ID（或設置一個可拖動的類而不是一個ID）。一個id應該是唯一頁面上元素的標識符。如果有多個具有相同ID的元素，則會遇到問題。