JQuery UI: Draggable клон и изменить клон

Question

У меня есть кнопка <div class='button' data-tag='h1'>Drag to insert h1 tag</div>

Когда вы перетащите его, я хочу кнопку, чтобы остаться там, где он был, помощник быть <h1>Example</h1> и где вы падаете, вы будете падать тег h1 без каких-либо перетаскиваемых или jQuery стилей пользовательского интерфейса.

так:

Вы перетащить что-то из кнопки> у вас есть тег h1 в воздухе, вы падаете без стилей тег h1.

Я получил это:

 var html = "<h1>Example</h1>"; 
     $('.button').draggable({ 
      connectToSortable: '.drop-area', 
      containment: 'document', 
      helper: function(){ return $(html); } 
     }); 

И это делает помощник, чтобы быть h1 тегом, но когда я бросаю его, упал элемент кнопка, не h1 тега.

Другими словами, у меня есть много кнопок с различными html-тегами или структурами. Эти кнопки отображают только имя тега, и когда вы его перетаскиваете, вы видите фактический тег, который нужно отбросить.

Answer 1

В вашей функции drop вы можете получить доступ к исходному перетаскиваемому элементу, используя ui.draggable, чтобы вы могли клонировать его и добавлять в элемент с возможностью удаления.

Быстрый Ref:

перетаскиваемым - Тип: JQuery - Объект, представляющий JQuery перетаскиваемую элемент.

helper - Тип: jQuery - Объект jQuery, представляющий помощника, который перетаскивается.

Docs: http://api.jqueryui.com/droppable/#event-drop

Код:

$(function() { 
    var html = "<h1>Example</h1>"; 
     $('.button').draggable({ 
      connectToSortable: '.drop-area', 
      containment: 'document', 
      helper: function(){ return $(html); } 
     }); 
    $("#droppable").droppable({ 
     drop: function (event, ui) { 
      $(ui.draggable).clone().appendTo(this); 
      $(ui.draggable).remove(); 
     } 
    }); 
}); 

Демо: http://jsfiddle.net/IrvinDominin/Cp6Rr/