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