テキスト1文字をドラッグ＆ドロップするには

<div id="from">あいうえお</div>
<div id="to">かきくけこ</div>
とあって、「あ」の文字をドラッグ＆ドロップで「か」と「き」の間に挿入させるようなことがしたいのですが、何か良い方法とかライブラリとかありますか？よろしくお願いします！
# <div>は2つとも任意の場所にあって、絶対位置指定ではありません。

No.1 回答者： yyr446 回答日時： 2009/10/05 10:52

極めて難しいですね。

特に異動元の文字と移動先の位置をマウスの座標から取得する部分が困難です。（不可能じゃないでしょうが）
もし、
<div id="from">
<span>あ</span>
<span>い</span>
<span>う</span>
<span>え</span>
<span>お</span>
</div>
<div id="to">
<span>か</span>
<span>き</span>
<span>く</span>
<span>け</span>
<span>こ</span>
</div>
としてもいいなら、位置はマウスイベント発生時の要素取得で
出来るので、比較的楽です。対象要素を削除したり追加したり
するDOM操作をイベントハンドラー関数として作成で、追加すれば
よいと思います。
自作が面倒ならAJAXライブラリーとして
「jQury UI draggable」というのがあります。
http://jqueryui.com/demos/draggable/
があります。

この回答へのお礼

コメントありがとうございます。
ご指定のURL、勉強してみます。

残念ながら事情で<span>タグは使えないのですが、移動元を
<div id="from">あ</div>
と1個の要素に変更してもかまいません。移動先は
<div id="to">かきくけこ</div>
のままですが。

お礼日時：2009/10/05 12:13