動態添加的div不可拖動

Question

我正在嘗試使可動態添加的div可拖動，但是如果我之后調用

$("#draggable").draggable({});

這個

for( var i = 0; i < 5; i++ ){
  var smallone = document.createElement('div');
  smallone.id = "draggable";
  smallone.className = "smallDiv";
  smallone.style.bacgroundColor = 'blue';

  document.body.appendChild(smallone);
}

沒有使div可拖動的機會。
我知道如果我首先創建divs就可以了，但是由於我的項目，我需要像這樣保持它，並且此示例顯示了我的問題。

這是小提琴： http : //jsfiddle.net/bimbochobot/9jstfwpm/4/

謝謝你的指教。

Answer 1

追加新元素后，您將必須initialize draggable小部件。

試試這個小提琴 ：

for( var i = 0; i < 5; i++ )
  {
      var smallone = document.createElement('div');
      smallone.id = "draggable";
      smallone.className = "smallDiv";
      smallone.style.backgroundColor = 'blue';
      document.body.appendChild(smallone);      
      $(smallone).draggable({});
   }

Answer 2

使用類而不是id，因為id必須是唯一的

$(".draggable").draggable({});

將可拖動類分配給所有div

Answer 3

簡單的1 ...

for( var i = 0; i < 5; i++ )
{
  var smallone = document.createElement('div');
  smallone.id = "draggable";
  smallone.className = "smallDiv";
  smallone.style.bacgroundColor = 'blue';

  document.body.appendChild(smallone);
  $(".smallDiv").draggable({});
}

它正在工作... http://jsfiddle.net/9jstfwpm/7/