jquery - 当我将元素“div”拖放到“ul”时，我想将“div”更改为“li”

Question

当我将元素div拖放到ul时，我想将div更改为li

演示http://jsfiddle.net/7fEQs/

脚本

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

非常感谢。

Answer 1

更新演示http://jsfiddle.net/yyene/7fEQs/7/

查询

$(function() {
    $( "#sortable" ).sortable({
        revert: true,
        receive: function(event, ui) {
            $(this).find('div').removeClass('ui-state-highlight ui-draggable').css({'display':''});            
            
            var html = [];
            $(this).find('div').each(function() {
                html.push('<li class="ui-state-default">' + $(this).text() + '</li>');
            });
            $(this).find('div').replaceWith(html.join(''));
        }
    });
    $( "#draggable" ).draggable({
        connectToSortable: "#sortable",
        helper: "clone",
        revert: "invalid"
    });
    $( "ul, li" ).disableSelection();
});