Javascript jquerydrag&；Drop：将元素从li更改为div并返回

我正在尝试以下方法：

第一阶段：

在下拉菜单中，将可拖动元素从li更改为div

将可拖动元素移动到画布内部

第2阶段：

在#imagelist

将可拖动元素移动到#imagelist

Js:

Html:

拖放时不应丢失的内容

拖放时不应丢失的内容

---

有人能帮我吗？

您可以创建一个新函数来更改元素类型-我认为您需要：

(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);

（函数（$）{
$.fn.changeElementType=函数（新类型）{
var attrs={}；
$.each（此[0]。属性，函数（idx，attr）{
attrs[attr.nodeName]=attr.nodeValue；
});
this.replaceWith（函数（）{
返回$（“”，attrs.append（$（this.contents（））；
});
};
})（jQuery）；

<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>

(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);