AIと戦って、あなたの人生のリスク診断 >>

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

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

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

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

このQ&Aに関連する最新のQ&A

A 回答 (1件)

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



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

を利用するといい。

後は、

ondragstart
ondragenter
ondragstop
でそれぞれで

event.X
event.Y

を拾えばいい。

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

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

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

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

jquery uiは

http://jqueryui.com/download

で、デベロッパーをDLするとサンプルが付いてくるので、それをテンプレートとすればわかるはずですが。
    • good
    • 0
この回答へのお礼

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

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

お礼日時:2011/04/08 01:45

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

QjQueryでクリックされた要素のidを関数で取得

以下のようなソースで、クリックされた要素のidをアラートで出したいとき、class: alphabetのa要素ををクリックすると、undefinedと出ます。
関数でthisを使うと呼び出し元のことを指さないので、クリックされた要素のidは出ないということなのですが、こういった場合、クリックされた要素のidを取得して、表示したい場合はどのようにすればよいか教えてください。

[htmlソース]
<a class='alphabet' id='a' href='' onclick="return false;">A</a>
<a class='alphabet' id='b' href='' onclick="return false;">B</a>
<a class='alphabet' id='c' href='' onclick="return false;">C</a>
<script src="jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('.alphabet').click(function(){
function alertAlphabet(){
alert($(this).attr('id'));
};
alertAlphabet();
});
});
</script>

以下のようなソースで、クリックされた要素のidをアラートで出したいとき、class: alphabetのa要素ををクリックすると、undefinedと出ます。
関数でthisを使うと呼び出し元のことを指さないので、クリックされた要素のidは出ないということなのですが、こういった場合、クリックされた要素のidを取得して、表示したい場合はどのようにすればよいか教えてください。

[htmlソース]
<a class='alphabet' id='a' href='' onclick="return false;">A</a>
<a class='alphabet' id='b' href='' onclick="return false;">...続きを読む

Aベストアンサー

イベントハンドラ・匿名関数と外部関数定義のタイミングが変じゃないですか?

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$('.alphabet').click(function () {
// 直接指定
alert($(this).attr('id'));
// 関数経由
alertAlphabet($(this));
});
});
function alertAlphabet(obj) {
// objはjQueryオブジェクト
alert(obj.attr('id'));
};
</script>
</head>
<body>
<a class='alphabet' id='a' href='' onclick="return false;">A</a>
<a class='alphabet' id='b' href='' onclick="return false;">B</a>
<a class='alphabet' id='c' href='' onclick="return false;">C</a>
</body>
</html>

イベントハンドラ・匿名関数と外部関数定義のタイミングが変じゃないですか?

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$('.alphabet').click(function () {
// 直接指定
alert($(this).attr('id'));
// 関数経由
alertAlphabet($(this));
});
});
function alertAlphabet(obj) {
// objはjQu...続きを読む


人気Q&Aランキング