当我拖动元素“div”并下降到“ul”时我想将“div”改为“li”

Question

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

DEMO http://jsfiddle.net/7fEQs/

SCRIPT

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

非常感谢。

Answer 1

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

JQUERY

$(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();
});