Перетащите чистый HTML с jQuery UI Draggable?

Question

Как перетащить содержимое HTML на «холст»?

Я хотел бы иметь простой список кнопок (перетаскиваемые элементы), где я могу перетащить один элемент.

Я хочу простой список кнопок, но при перетаскивании на «холст» я хочу, чтобы он заполнял разные HTML для каждой кнопки.

Я видел, как кто-то использовал параметр в перетаскиваемом элементе, например «data-insert-html». Здесь я видел, как люди используют базовый HTML или путь к html-файлу, который они хотят сбросить в .mywrapper.

Я пробовал разные способы. Это наиболее близко, но до сих пор в нескольких милях от места, где я хочу быть:

<div class="draggable" data-insert-html='<h1>Some HTML</h1>'> 
My button text 
</div> 
<div class="draggable" data-insert-html='<p>Some other content</p>'> 
My button #2 text 
</div> 

JS:

Я обнаружил, что я могу использовать это, чтобы получить данные:

var insertingHTML = $(this).attr('data-insert-html'); 

Но не нашли хорошего способа сбросить эту «insertingHTML» в холст вместо содержимого DIV.

$(".draggable").draggable({ 
     connectToSortable: ".mywrapper", 
     helper: "clone", 
     helper: function(event) { 
      return "<div class='custom-helper'>Add '" + $(this).context.innerHTML + "' by letting it go on the yellow field.</div>"; 

     }, 
     // I have tried to use the STOP event. But the problem with it is that I can only drag one item ONCE to the canvas. I want infinite. 
     stop: function() { 

     // This gets the correct data from the draggable DIV 
     var insertingHTML = $(this).attr('data-insert-html'); 

     // BUT then I am lost. How do I add this to where the marker is? 
     event.originalEvent.dataTransfer.setData("Text",insertingHTML); 
     // test ended 
     }, 
     revert: "invalid", 
    }); 
    $().disableSelection(); 

Вот скрипку, чтобы играть с: http://jsfiddle.net/Preben/pcawje7u/8/

Можете ли вы помочь мне исправить мой код?

Спасибо :-)

Answer 1

Добавить новый текст перемещенного элемента с помощью функции ниже. Он добавляет к каждому перетаскиваемому предмету свойство, которое он держит с собой. data-insert-html

stop: function() { 
     $('.mywrapper [data-insert-html]').each(function(){ 
      $(this).html($(this).attr('data-insert-html')); 
     }); 
     }, 

Изменить: Я забыл о целевом только перетаскиваемой области. Я исправил свой код.