Jquery Drag & Drop: Change element from li to div and back

Question

I am trying the following:

Stage 1:

1. Change the draggable element from li to div on drop in #canvas
2. Move the draggable element inside #canvas

Stage 2:

1. Change the draggable element from div to li on drop in #imagelist
2. Move the draggable element inside #imagelist

Js:

$(function () {
    var $imagelist = $("#imagelist");
    var $canvas = $("#canvas");

    $('li', $imagelist).draggable();

    $canvas.droppable({
        drop: function (event, ui) {}
    });

    $imagelist.droppable({
        drop: function (event, ui) {}
    });
});

Html:

<div id="listwrapper">
  <ul id="imagelist">
     <li class="draggable>Content that should not be lost on drag/drop</li>
     <li class=" draggable>Content that should not be lost on drag/drop</li>
  </ul>
</div>
<div id="canvas">
  <div class="draggable">Content that should not be lost on drag/drop</div>
</div>

Could someone help me with this?

Answer 1

You can create a new function to change the element type - which is what I think you need:

(function($) {
    $.fn.changeElementType = function(newType) {
        var attrs = {};

        $.each(this[0].attributes, function(idx, attr) {
            attrs[attr.nodeName] = attr.nodeValue;
        });

        this.replaceWith(function() {
            return $("<" + newType + "/>", attrs).append($(this).contents());
        });
    };
})(jQuery);

see here

and here