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

i trying following:

stage 1:

1. change draggable element li div on drop in #canvas
2. move draggable element inside #canvas

stage 2:

1. change draggable element div li on drop in #imagelist
2. move 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 should not lost on drag/drop</li>      <li class=" draggable>content should not lost on drag/drop</li>   </ul> </div> <div id="canvas">   <div class="draggable">content should not lost on drag/drop</div> </div> 

could me this?

you can create new function change element type - think 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