jquery Draggable +sortable 与自定义 html 的放置事件？

将元素放置在可放置区域时更改 html。

像这样的东西：http://the-stickman.com/files/jquery/draggable-sortable.html

但是当我删除元素时，会更改放置的 html。

其他示例：我有 2 个列表，第一个可拖动列表和第二个可放置列表，当我从第一个列表拖动元素并将该元素放入第二个列表时，该元素将被克隆到第二个列表

拖动：

<a href="#">test</a>

drop:

<a href="#">test</a>

我想将此 html 更改为

拖动：

<a href="#">test</a>

drop:

<div class="toggle"><a href="#">test</a></div>

检查这个演示http://jsfiddle.net/yeyene/7fEQs/8/

您可以根据需要自定义放置的元素。

$(function() {
    $( "#draggable li" ).draggable({
        connectToSortable: "#sortable",
        helper: "clone",
        revert: "invalid"
    });

    $( "#sortable" ).sortable({
        revert: true,
        receive: function(event, ui) {
            var html = [];
            $(this).find('li').each(function() {
                html.push('<div class="toggle">'+$(this).html()+'</div>');
            });
            $(this).find('li').replaceWith(html.join(''));
        }
    });
});