Недавно добавленные элементы не становятся перетаскиваемыми

Question

Я создаю простой конструктор форм, чтобы поиграть с jQueryUI. У меня есть список элементов формы, так же как изображения, которые я сделал перетаскиваемыми, настроены на хелпер-клон. У меня также есть dropable область, на которой я установил событие drop, чтобы прочитать идентификатор отброшенного изображения и создать соответствующий элемент формы и добавить его в область droppable. Как только я добавлю новый элемент, я тогда настраиваю его на перетаскивание. Проблема в том, что, несмотря на то, что на них были вызваны новые элементы, имеющие класс ui-draggable, они не перетаскиваются. Я хочу, чтобы их можно было перетащить, как только они были созданы.

Вот код: -

var itemCount = 1; 
var idToAdd; 
var itemToAdd; 

$(document).ready(function(){ 
    $(".draggable").draggable({ 
     opacity:0.5, 
     helper: "clone" 
    }); 

    $(".form_builder").droppable(
     { 
       activeClass: "droppable_dragged", 
       drop: function(e, ui){ 
        var dropped_item = ui.draggable; 
        switch($(dropped_item).attr("id")){ 
         case "text_box": 
          idToAdd = "textBox" + itemCount; 
          itemToAdd = "<input id='" + idToAdd + "' type='text' />"; 
          break; 
         case "text_area": 

          break; 
         case "radio": 
          idToAdd = "radio" + itemCount; 
          itemToAdd = "<input id='" + idToAdd + "' type='radio' />"; 
          break; 
         case "check": 
          idToAdd = "check" + itemCount; 
          itemToAdd = "<input id='" + idToAdd + "' type='check' />"; 
          break; 
         case "dropdown": 

          break; 
         case "file": 
          idToAdd = "file" + itemCount; 
          itemToAdd = "<input id='" + idToAdd + "' type='file' />"; 
          break; 
         case "button": 
          idToAdd = "button" + itemCount; 
          itemToAdd = "<input id='" + idToAdd + "' type='submit' />"; 
          break; 
        } 
        itemCount++; 
        $(this).append(itemToAdd); 
        $("#" + idToAdd).draggable(); 
       } 

      }); 
}); 

Answer 1

UPDATE Причина, по которой он не работает потому, что вход как-то мешает событию перетаскивания , Это не имеет никакого отношения к тому, что он был отброшен. Я добавил Прокладки к элементу и теперь, волоча на обивке, она работает: http://jsfiddle.net/7HUt2/4/

1. Try, чтобы ограничить область действия переменных:

   drop: function(e, ui){ 
       var itemToAdd; 
       ... 
   } 
   

   Это будет гарантировать, что никакой другой одновременного событие приведет к повреждению потока вашей программы.

2. Избегайте ищет свои объекты, если вы можете ссылаться на них напрямую:

   itemToAdd = '<input type="..."/>'; //No id necessary at this point. 
   $(itemToAdd).appendTo(this).draggable(); 
   

Это сделает его гораздо более устойчивым

Answer 2

Где бы вы добавления новых элементов вам придется снова применить плагин, потому что динамически добавленные элементы не знают, куда пристроить себя как

//here you add the elements with class draggable 
$(".draggable").draggable({ 
     //settings here 
    }); 

Answer 3

Вызов .draggable влияет только на существующие DOM, а не на будущие элементы DOM. Поэтому вам нужно вызвать его снова, добавив новые элементы, которые вы хотите перетащить.

Answer 4

Пожалуйста, попробуйте изменить

$('body').append(itemToAdd) 

в

$('body').append(itemToAdd).find('.draggable').draggable() 

Или

$('body').append(itemToAdd); 
$('.draggable').draggable(); 

Answer 5

Для вашего плагина, чтобы иметь влияние на динамически добавленных элементов, которые вы могли бы использовать метод .on() (.on() заменен .live() с jQuery v1.7.x):

$('body').on("focusin", function(){ 
    $(".draggable").draggable({ 
     opacity:0.5, 
     helper: "clone" 
    }); 
}); // on 

Чтобы устранить проблему с Chrome, добавьте атрибут tabindex="1" к каждому элементу с помощью class="draggable". У других плагинов была такая же проблема, и это было обходным путем.

Check this as a reference

С помощью этого обходного пути, вы не должны вызывать плагин снова после добавления новых элементов, как предложено.