jQuery的拖放：从李更改元素的div和背部

Question

我尝试以下操作：

第1阶段：

1. 变化从李到DIV上滴在拖动元素#canvas
2. 移动拖动元件内部#canvas

阶段2：

1. 变化从DIV到利上下降#imagelist
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