javascript - Jquery拖放：将元素从li更改为div并返回

Question

我正在尝试以下操作：

阶段1：

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

第 2 阶段：

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

看这里

和这里