Javascript 拖放连接的项目

我正在制作一个拖放列表来对一些“模块”进行排序。 我想连接一个输入，以便您可以命名它

现在我想把它分类到灰色部分。 但这种情况会发生：

您只能对模块进行排序。我想将模块与输入连接起来。所以两者都很好。不想用桌子。但我不知道怎么做

$("#list_testdata ol").droppable({
    activeClass: "ui-state-default",
    hoverClass: "ui-state-hover",
    accept: ":not(.ui-sortable-helper)",
    drop: function(event, ui) {
        $(this).find(".placeholder").remove();
        $("<li></li>").text(ui.draggable.text()).appendTo(this);
        $(this).append('<input type="text" value="test">');

    }
}).sortable({
    items: ":not(.placeholder)",
    sort: function() {
        $(this).removeClass("ui-state-default");
        $("ul, li").disableSelection();
    }
});

$（“#列表#测试数据ol”）.可拖放({
activeClass：“ui状态默认值”，
hoverClass:“ui状态悬停”，
接受：“：非（.ui可排序帮助程序）”，
drop：函数（事件、用户界面）{
$（this.find（“.placeholder”）.remove（）；
$（“
”）.text（ui.draggable.text（））.appendTo（this）；
$（此）。附加（“”）；
}
}).可排序({
项目：“：非（.占位符）”，
排序：函数（）{
$（this.removeClass（“ui状态默认”）；
$（“ul，li”）.disableSelection（）；
}
});

通过将其放在一个div中进行修复

$(this).append('<div class="list_testdata_div"><input type="text" value="Bezeichnung"><li>' + li_val + '</li></div>');

$（this）.append（“
”+li_val+”
）；