Jquery Drag and;丢弃：将元素从li更改为div并返回

Question

我正在尝试以下方法：

第1阶段：

1. 在 #canvas
中将可拖动元素从 li 更改为 div
2. 将可拖动元素移动到 #canvas
中

第二阶段：

1. 在 #imagelist
中将可拖动元素从 div 更改为 li
2. 将可拖动元素移到 #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>

有人可以帮我这个吗？

Answer 1

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

(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