Как реализовать разные свойства droppable для каждого из элементов draggable?

Question

[fte]

Прошу прощения, если, вопрос сформулирован коряво.
Я лишь где-то в начале пути постижения jquery.

Суть в том, что хочу реализовать form builder на основе drag and drop.

Процесс уже пошел, сделал то, что хотел для одного элемента:

jsfiddle.net/z7sxxhe4

Главный вопрос - как сделать так, чтобы каждый элемент из левой колонки после перетаскивания "превращался" в другой элемент.

Например, я перетаскиваю первую кнопку - она превращается в форму. Перетаскиваю вторую - она превращается в таблицу ну и т.д. Главное, чтобы содержание "превращенного" элемента я мог задавать как угодно.

Огромное спасибо за любую помощь!

Answer 1

[fte]

Вопрос решился вот так:

drop: function (e, ui) {
  if (ui.draggable[0].id == "auth") {
      var $field = '<div class="input-block"><span class="label label-primary">'+          ui.draggable.text() +'</span><input type="text" class="form-control main-input" placeholder="Your text"></div>';
      var $el = $($field);
      $el.append($('<div class="removeqwe"><button type="button" class="btn btn-default btn-xs remove"><span class="glyphicon glyphicon-trash"></span></button></div>').click(function () {    $(this).parent().detach(); }));
      $(this).append($el);
  }
  else if (ui.draggable[0].id == "second") {
       ....
  }
  else if (ui.draggable[0].id == "third") {
       ....
  }
  else if (ui.draggable[0].id == "fourth") {
       ....
  }  
}