DOMの要素ををtextarea(dropした位置

質問

jquery ui のdraggable,droppableを使って、あるDOMの要素ををtextarea(dropした位置)に挿入したいです。

ドラッグ、ドロップは普通に動かせるのですが、以下の機能が実装できません。
情報お持ちの方、いらっしゃいましたら、お願いします。

ドラッグ中、または、ドロップした瞬間に、textareaのキャレット位置を取得する
実装方法が思いつきません。
(ドロップ時点です。)

欲を言えば、ドラッグ中にキャレット位置を表示させたいです。
※ちょうど、chromeやFFで画像をテキストエリアにドラッグするようなイメージです。

回答No.1

0909union · ベストアンサー

全部は書けないのでヒントだけ

http://msdn.microsoft.com/en-us/library/ms535861(v=VS.85).aspx

を利用するといい。

後は、

ondragstart
ondragenter
ondragstop
でそれぞれで

event.X
event.Y

を拾えばいい。

互換性はCSS３ぐらいなのか。もともとIE5.5では実装されていたが、正式にはIE９からのようで、仕様がCSS３になるようで、別の動作になる。CSS３対応のブラウザなら動作する。IEはDOCTYPEの変更で対応。

単にondragstartだと、ドラックしている間は、そのオブジェクトがActiveなので、その途中のX,Yは取れない。なので、dataTransferを使えば、途中も拾えるのでドロップした時には、キャレットのX,Yをevent発生ポイントで拾える。

これはDIVにも適用できるので、formオブジェクト以外もOK。

サンプルページがついているので、ためしてください。

jquery uiは

http://jqueryui.com/download

で、デベロッパーをDLするとサンプルが付いてくるので、それをテンプレートとすればわかるはずですが。

お礼

ご回答ありがとうございます。

ちょっといま立てこんでおり、試せていないのですが参考にしたいと思います。