jquery - jqueryのドロップ可能な位置を保存する

Question

ドロップ可能な位置をデータベースに保存したい。ドロップ可能な各div内に、「i_」プレフィックスが付いたdiv名のテキスト入力フィールドが追加されました。

ドロップされたオブジェクトを表示するためにコードにアラートを入れた場合、IDはアラートボックスに正しく表示され、テキスト入力フィールドに表示されます。しかし、[OK]をクリックすると、消えます。

<div style="float:left; border-style:solid;">
<div class="draggable" class="ui-widget-content" id="1059" style="left:0px; top:0px;"    >john doe</div>
<div class="draggable" class="ui-widget-content" id="1113" style="left:0px; top:0px;"    >jane doe</div>

<div   style="float:left;  vertical-align:top"  class="droppable ui-widget-header" id="1-2">
<input type='text' id='i_1-2'  name='i_1-2' value=''><p>1-2</p></div>

<div style="clear:both";></div> <div style="float:left; vertical-align:top" class="droppable ui-widget-header" id="2-1">
<input type='text' id='i_2-1'  name='i_2-1' value=''>
<p>2-1</p></div>

呼び出される関数がthisの場合、テキストボックスは黄色になりますが、値は設定されていません

drop: function(event, ui )
                 {
            var f=ui.draggable.attr("id");alert(f);
            var s = 'i_'+$(this).attr("id");//alert(s);

              $('#'+s).css({'background-color' : 'yellow'});
              $('#'+s).val(f);

                }

私は何を間違っているのですか？

    $( ".droppable" ).droppable
        ({
        activeClass: "ui-state-hover",hoverClass: "ui-state-active",
        drop: function( event, ui )
             {
        var f=ui.draggable.attr("id");//alert(f);
        var s = 'i_'+$(this).attr("id");
document.getElementById(s).value=f;//alert(document.getElementById(s).value);

            }

} );