JQuery - Как создать новый перетаскиваемый div при каждом нажатии кнопки

Question

Используя JQuery, мне нужно иметь возможность нажимать кнопку и создавать перетаскиваемый div. Мой код выглядит следующим образом

У меня есть следующий стиль в теле

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

Это контейнер, в котором я хочу дела до размещения и кнопка, которая должна создать новый DIV. Когда я создаю загрузку div на странице, она перетаскивается и работает так, как ожидалось.

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

Я тогда этот сценарий в организме, что создает перетаскиваемый по нажатию кнопки и коду, который, насколько я понимаю, делает все с идентификатором = «перетаскиваемом» перетаскиваемым.

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

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

Когда я нажимаю кнопку, он создает div, который имеет стиль, но не перетаскивается.

Я не уверен, что с этим не работает. Я рассмотрел несколько примеров подобных вещей, но, похоже, это должно сработать. Что мне не хватает? Я использую bootstrap, но никаких других фреймворков.

Как я могу создать новый div, и все остальные, созданные нажатием кнопки, перетаскиваются?

Answer 1

Пример здесь http://jsfiddle.net/eb34jztf/

Вы должны начать перетаскивать к каждому вновь созданному элементу, и, пожалуйста, в будущем не использовать одинаковые значения идентификаторов на одной странице :)

$("#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() не делает то, что вы думаете, что он делает. Это не говорит «сделать все элементы с идентификатором draggable draggable».

Что он делает, это выполнить выбор, чтобы вернуть все элементы, соответствующие #draggable на странице. Затем вы применяете метод с именем draggable к каждому из этих элементов. В этот момент выполняется исполнение. Нет слушателя, который работает на постоянной основе.

Когда вы создаете новый элемент, вам нужно будет его перетащить, если хотите. Что-то вроде этого: (обратите внимание на .draggable() прикован к созданию нового элемента)

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

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

Поскольку этот элемент не существует в первый раз, когда вы сделали перетаскиваемым он не был включен первый на второй круг.

Кроме того, несколько несвязанных, но если вы не удаляете первый перетаскиваемый div перед добавлением второго, вам нужно будет выбрать уникальный идентификатор для ваших элементов (или установить класс перетаскиваемого вместо id). Идентификатор должен быть уникальным идентификатором для элемента на странице. Вы столкнетесь с проблемами, если есть несколько элементов с одним и тем же идентификатором.