Я пытаюсь сделать мои динамически добавленные 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);
}

Нет никаких шансов сделать divs перетаскиваемым.
Я знаю, что это работает, если я сначала создаю div, но мне нужно сохранить это так из-за моего проекта, и этот пример показывает мою проблему.

Вот скрипка: http://jsfiddle.net/bimbochobot/9jstfwpm/4/

Спасибо за совет.

1
Petr Bečka 15 Дек 2015 в 15:29

3 ответа

Лучший ответ

Вам нужно будет 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({});
   }
1
Rayon 15 Дек 2015 в 12:32

Используйте класс вместо идентификатора, так как идентификатор должен быть уникальным

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

Назначить перетаскиваемый класс всем div

0
Djave 15 Дек 2015 в 12:34

Просто 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/

0
Divesh Oswal 15 Дек 2015 в 12:36