动态添加的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/