ドラッグアンドドロップでtextareaにテキストを挿入したいのですが

Question

ドラッグアンドドロップを使ってテキストエリアに4文字区切りで挿入していくというものを作っているのですが、
FireFoxでは動作しましたが、IE、Chromeで動かしてみたところ
IE：エラーは出ないがテキストが入らない
Chrome：Uncaught TypeError: Cannot read property 'value' of undefined というエラーが出る
といった感じで躓いています。
ソースは以下のようになっております。

###ソースコード

<style>
h1 { padding: .2em; margin: 0; font-size:14px; }
#dragTest { float:left; width: 15%; margin-right: 2em; }
#drop { width: 200px; float: left; margin-top: 1em; }
/* style the list to maximize the droppable hitarea */
#drop td { margin: 0; padding: 1em 0 1em 3em;}
#drop td { border: 1px #000 solid; }
</style>
<script>
$(function( e ){
	$( "#drag" ).accordion();
	f_drag();
	f_drop( e );
});
</script>
<div id="dragTest">
	<h1 class="ui-widget-header">クラス</h1>
	<div id="drag">
		<h2><a href="#" draggable="false">test</a></h2>
		<div>
			<ul>
				<li>AAAA</li>
				<li>BBBB</li>
				<li>CCCC</li>
				<li>DDDD</li>
				<li>EEEE</li>
			</ul>
		</div>
	</div>
</div>
<div id="drop">
	<table border="1">
			<tr>
				<th>droptest</th>
				<td>
					<div class="drop-target">
						<textarea cols="5" rows="2" style="overflow:auto;" id="drop1"></textarea>
					</div><br>
					<div class="drop-target">
						<textarea cols="5" rows="2" style="overflow:auto;" id="drop2"></textarea>
					</div><br>
					<div class="drop-target">
						<textarea cols="5" rows="2" style="overflow:auto;" id="drop3"></textarea>
					</div><br>
					<div class="drop-target">
						<textarea cols="5" rows="2" style="overflow:auto;" id="drop4"></textarea>
					</div><br>
				</td>
			</tr>
		</table>
</div>

var repComma, str, parentElm, childElm, rect, X, Y;
//ドラッグ
function f_drag( e ) {
	$( "#drag li" ).draggable({
		appendTo: "body",
		revert: "invalid",
		helper: "clone",
		cursor: "pointer"
	})//draggable
}//f_drag
//ドロップ
function f_drop( e ) {
	$( ".drop-target" ).droppable({
		drop: function( e, ui ) {
			//座標取得
			rect = this.getBoundingClientRect();
			//スクロールの誤差考慮
			X = rect.left + pageXOffset;
			Y = rect.top + pageYOffset;
			//座標を指定して親要素を取得
			parentElm = document.elementFromPoint( X, Y );
			//子要素の取得
			childElm = parentElm.children[0];

			//テキストボックスの中身とドロップされたテキストを入れる
			if( childElm.value != null){
				str = ( childElm.value + ui.draggable.text() );
				//一度カンマを取り除く
				repComma = str.replace(/,/g, "");

				//下４桁ずつカンマ区切りにしていく
				while( repComma != repComma.replace( /(\w+)(\w{4})/, "$1,$2" ) ) {
					repComma = repComma.replace( /(\w+)(\w{4})/, "$1,$2" )
				}//while
				//テキストボックスに追加
				childElm.value = repComma;
			} else {
				childElm.value = ui.draggable.text();
			}//if
		}//drop
	})//droppable
}//f_drop

ご指摘のほどよろしくお願いします。

Answer 1

検証はしていませんが、

        drop: function( e, ui ) {
            childElm = $(this).children('textarea').get(0);

で上手くいったりしませんか？

Comments

[pkmn5b]

各ブラウザで試してみましたがうまくいきました！
ありがとうございました！