• ベストアンサー

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

jquery ui のdraggable,droppableを使って、あるDOMの要素ををtextarea(dropした位置)に挿入したいです。 ドラッグ、ドロップは普通に動かせるのですが、以下の機能が実装できません。 情報お持ちの方、いらっしゃいましたら、お願いします。 ドラッグ中、または、ドロップした瞬間に、textareaのキャレット位置を取得する 実装方法が思いつきません。 (ドロップ時点です。) 欲を言えば、ドラッグ中にキャレット位置を表示させたいです。 ※ちょうど、chromeやFFで画像をテキストエリアにドラッグするようなイメージです。

質問者が選んだベストアンサー

  • ベストアンサー
  • 0909union
  • ベストアンサー率39% (325/818)
回答No.1

全部は書けないのでヒントだけ 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するとサンプルが付いてくるので、それをテンプレートとすればわかるはずですが。

golgo-goo
質問者

お礼

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

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • textareaに画像を表示したい

    textareaの入力支援を作成しています。 PHPで画像のディレクトリを開き別窓などに一覧表示させ、 その画像をクリックでjQueryでテキストエリアへタグを挿入。 <textarea id="test"> あああ <img src="hoge.jpg"> いいい </textarea> ↑のようにIMGタグを挿入する状態までは実装させることが出来るのですが、 UI的に、このIMGタグを画像（サムネ）として表示させたいと考えています。 <textarea id="test"> あああ ■（←画像） いいい </textarea> テキストエリアを監視して置換するなど方法はありそうなのですが そもそもテキストエリア内で画像を表示させることができるのでしょうか？ 何かいいアイディア、あるいはプラグイン等がありましたら教えてください。

  • jQuery UIのDroppableにて

    jQuery UIのDroppable要素にDraggable要素をドロップした際に、どのDraggable要素をドロップしたのか判定したいのですが、どうすれば判定できるのでしょうか？ 例えば http://stacktrace.jp/jquery/ui/interaction/droppable.html 上記のサイトのページ下の方にあるサンプルで、blueのDraggable要素をpinkにドロップした際に、「blueの要素がドロップされたよ」みたいのをalertで出すようなことをしたいです。

  • jQuery UIのdraggableについて

    こちらでは初めて質問させていただきます。 よろしくお願いします。 現在、jQuery UI の draggable を使用してWebブラウザ上での ドラッグ＆ドロップを実装中なのですが、 期待通りに動作させることが出来ません。 <script></script> …… (1) <html> <head> <script type="text/javascript" src="jQuery/jquery-1.3.2.js"></script> <script type="text/javascript" src="jQuery/jquery-ui-1.7.2/development-bundle/ui/ui.core.js"></script> <script type="text/javascript" src="jQuery/jquery-ui-1.7.2/development-bundle/ui/ui.draggable.js"></script> <style> #a { height:100px; width:300px; overflow:scroll; border:solid 1px Black; } #b { width:60px; height:40px; background:lime; position:absolute; top:10px; left:50px } #c { width:60px; height:40px; background:lime; position:absolute; top:60px; left:50px } </style> <script type="text/javascript"> $j = jQuery.noConflict(); $j(function($) { $('#b').draggable(); }); $j(function($) { $('#c').draggable(); }); </script> </head> <body> <div id="a"> <span id="b">Drag Element1</span> <span id="c">Drag Element2</span> </div> </body> </html> ドラッグ対象は複数存在するため、ドラッグ対象を<div>エリア内で スクロール（必須です）させています。 ドラッグ対象を<div>エリア外にドラッグしたいのですが、 <div>エリア内しかドラッグできません。 ((1)の記述がないと、ドラッグ対象が<div>エリア内でスクロール しませんでした。？？？) どなたか、よきアドバイスをお願いします。

  • jQuery:要素の位置情報の保持について

    jQuery:要素の位置情報の保持について 現在、IE8,jQuery 1.4.1,jQuery UI　1.8.1の環境でWebアプリケーションの作成を行っています。 画像ファイルを（マウスの）ドラッグで移動させ、ドロップした後の位置情報を保持し、再びそのWebアプリケーションを起動させた時に画像ファイルが移動した後の位置のままというようにしたいと考えています。 このようなことは可能でしょうか？ もし可能な場合、何か参考となるコードやキーワードを教えていただけないでしょうか？ 画像ファイルを移動させる事までは確認しましたので載せておきます。 <html> <head> <title>ドラッグで要素移動title> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <link rel="stylesheet" href="style.css" type="text/css" /> <link rel="stylesheet" href="../Scripts/jquery-ui-1.8.1.custom.css" type="text/css" /> <script type="text/javascript" src="../Scripts/jquery-1.4.1.min.js"></script> <script type="text/javascript" src="../Scripts/jquery-ui-1.8.1.custom.min.js"></script> <script type="text/javascript" language="JavaScript"><!-- $(function () { $("img.mover").draggable({ opacity: 0.5, cursor: "move", grid: [20, 20], stop: function () { var x = $(this).css("left");//この値をどこかで保持しておきたい var y = $(this).css("top");//この値をどこかで保持しておきたい alert("左：" + x + "、上：" + y ); } }); }); //--></script> </head> <body> <img src="pic1.jpg" class="mover" alt="test" /> <img src="pic2.jpg" class="mover" alt="test" /> <img src="pic3.jpg" class="mover" alt="test" /> </body> </html>

  • jQueryのdraggable縦書き出来ますか？

    プログラム自体初めてなのですが、仕事の関係で作らないといけない事になりました。 目的は、「文字が書かれた札をドラッグで色々と動かして操作したいです。」 jQueryのdraggableを使用して札のようなものをマウスのドラッグで色々と動かしたいと考え 作ってみましたが、札の中がどうしても横書きになってしまいます。 「札の中を縦書きにする方法を教えて頂けないでしょうか？」 基本的な考え方が間違っているかもしれませんが出来るのであればどうか教えてほしいです。 とりあえずここまでは書いています。 質問が分かりづらく申し訳ありません。 <!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title>jQuery UI Draggable - Default functionality</title> <link rel="stylesheet"href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /> <script src="http://code.jquery.com/jquery- 1.9.1.js"></script> <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> <link rel="stylesheet" href="/resources/demos/style.css" /> <style> #draggable01 { width: 25px; height: 500px; padding: 0.5em; } #draggable02 { width: 25px; height: 350px; padding: 0.5em; } </style> <script> $(function() { $( "#draggable01" ).draggable(); }); </script> <script> $(function() { $( "#draggable02" ).draggable(); }); </script> </head> <body> <div> <div id="draggable01" class="ui-widget-content"> <p>あいうえお</p></div> <div id="draggable02" class="ui-widget-content"> <p>かきくけこ</p></div> </div> </body></html>

  • jQueryを用いたドラッグ＆ドロップについて

    jQueryを用いてドラッグ＆ドロップによって要素を移動できるプログラムを書いています。 draggableとdroppableによって「要素を移動しました」とメッセージを表示させる事は出来ましたが、ドロップした所へ要素をcloneでコピーし、appendで追加するとその要素はドラッグ出来ません。 その原因として、javascriptが読み込まれた後に生成された要素に対してjavascriptが機能しないからだと思っています。 目的としましては、 １．要素をドラッグ＆ドロップで移動可能とし、　 ２．ドロップされた所へ要素を挿入し、 ３．ドロップされた順番に整列を行い、 ４．また他の要素内へドラッグ可能 とした機能を実現したいと考えています。 特に３番目の「ドロップされた要素をドロップした要素内に整列を行う」箇所に重点をおいています。 アドバイス宜しくお願いします。

  • jQueryで質問です。

    jQueryで質問です。 オブジェクトA、Bがあるとします。 Aをドラッグすると、mousedownかdragstartの段階で要素がBに置き換わってドラッグさせるような動きは可能でしょうか。 作成中のソースを記載します。 <html> <head> <title>test</title> <script type="text/javascript" src="./jquery.min.js"></script> <script type="text/javascript" src="./ui/jquery.ui.core.js"></script> <script type="text/javascript" src="./ui/jquery.ui.widget.js"></script> <script type="text/javascript" src="./ui/jquery.ui.mouse.js"></script> <script type="text/javascript" src="./ui/jquery.ui.draggable.js"></script> <script type="text/javascript" src="./ui/jquery.ui.droppable.js"></script> <script type="text/javascript"> $(function(){ obj1 = $("#box"); obj2 = $('<div style="width:200px;height:200px;background:red;">B</div>'); obj1 .mousedown( function(){ obj1.replaceWith(obj2); obj2.draggable(); } ); }); </script> </head> <body> <div style="width:200px; height:100px; background: #cccccc;" id="box">A</div> </body> </html> これだと、Aのドラッグを一度解除して、Bをドラッグすると上手くいきますが、1回のモーションでBをドラッグさせたいのです。 宜しくお願いします。

  • jqueryを利用してインラインフレームに画像をドラッグ&ドロップした

    jqueryを利用してインラインフレームに画像をドラッグ&ドロップしたい jqueryを使って、画像をドラッグしたり、それを自分で設定したエリアにドロップすることはできました そこで、インラインフレームを使って表示している外部プログラムにドロップエリアを作成し、親フレームからインラインフレームに画像をドラッグ&ドロップして要素を渡したいと思ったのですがやり方が分かりません よろしくお願いします

  • textareaの現在の行インデックスを取得する

    対象ブラウザはGoogle Chromeです（IEでは解決済み） textareaのボックス内で、現在キャレットが位置する行インデックスを 取得したいのですが、どうすればよいでしょうか。 最終的にやりたいのはオートインデントです。 textarea内でEnterキーを押した時に、その行の先頭のスペースの数を調べて 次の行の先頭に同じ数のスペースを自動で挿入します。 このため、Enterキーを押した瞬間の行インデックスを取得する必要があります。 その後の処理であるスペースの挿入は方法が分かっているので問題ありません。 よろしくお願い致します。

  • jQuery UIでドラッグ制限

    jQuery UIのドラッグ可能なDialogオブジェクトを複数出し、それぞれが重なる位置へのドラッグを制限したいのですが、やり方がわかりません。 ドラッグ時に呼ばれるコールバック関数で重なりチェックし、位置を書き換えできないかと思っています。 どのようにすればよいでしょうか？

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する