ドラッグアンドドロップで接続されたアイテム

Question

私はいくつかの "モジュール"を並べ替えるためにドラッグ&ドロップリストを作っています。 名前を付けるために入力を接続したいと思います。

だから今、私は灰色のdivでこれをソートしたいです。 しかし、これは起こる：

あなただけのモジュールを並べ替えることができます。私はモジュルと入力を接続したい。だからどちらもソートです。テーブルを使いたくない。しかし、私はこれを行う方法を知らない。

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

Answer 1

divにまとめて固定しました。

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