- ベストアンサー
jQueryでオブジェクトをドラッグする際に要素の置き換えを実現する方法
- オブジェクトAをドラッグする際に、mousedownかdragstartの段階で要素をBに置き換える動きを実現する方法はありますか？
- 現在のソースコードでは、Aをドラッグすると一度解除してからBをドラッグする必要があります。1回のモーションでBをドラッグさせる方法を教えてください。
- 使用しているjQueryの関数やメソッドについて、どのように活用すれば要素の置き換えを実現できるのか、具体的なソースコード例を教えてください。
- q_user
- お礼率75% (9/12)
- JavaScript
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
#1、#2です。 ＞A要素を変化させるやり方となるのですね テキストに限らず入れ替えは可能だと思いますが、入れ替えられるものに制限があるようです。 ご提示のサンプルだと、直接styleを変えてしまうほうが簡単なのでそのような書き方をしてみただけです。 （こちらにテスト環境がないので不明ですが）、FFやOpera（やIE6）ではドラッグ対象とした直接の要素さえ残しておけば大丈夫みたいですが、IE8では（想像するところ）イベントの発生元となる要素も残しておかないとうまくいかないのかもしれません。 それなので、#2の後半に書きましたように（見た目にわからない）カバーレイヤーみたいなものを作っておけば、イベントの発生元の要素をそこにできますので、実質的には要素が自由に取替え可能になるのではないかと想像します。（確認できてませんが） ＞別のオブジェクトをドラッグさせる事は不可能なのでしょうか。 #1に書いておきましたが、対象要素がなくなってしまうので擬似的にマウスアップ/ダウンを発生すればいいのではないかと想像します。 やったことがないので、試してみましたができないことはなさそうですね。（FF3.5で確認） ◆ＦＦの場合（まだ、ちょっとカーソル位置がおかしいけれど） $(function(){ obj1 = $("#box"); obj2 = $('<div style="width:200px;height:200px;background:red;">B</div>'); obj1.mousedown( function() { var evt = document.createEvent("MouseEvents"); evt.initMouseEvent("mouseup", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null); var canceled = obj1.get(0).dispatchEvent(evt); obj1.replaceWith(obj2); obj2.draggable(); evt = document.createEvent("MouseEvents"); evt.initMouseEvent("mousedown", true, true, window, 0, 200, 200, 0, 0, false, false, false, false, 0, null); canceled = obj2.get(0).dispatchEvent(evt); }); }); 参考にしたのは以下です。 https://developer.mozilla.org/Ja/DOM/Document.createEvent https://developer.mozilla.org/en/DOM/event.initMouseEvent IEでも同様の処理はできるはずですが、FFと仕様が違うので、参考にするならこのあたりを。 http://msdn.microsoft.com/ja-jp/library/cc392068.aspx http://msdn.microsoft.com/ja-jp/library/cc392072.aspx
その他の回答 (2)
- fujillin
- ベストアンサー率61% (1594/2576)
#1です。 ＞残念ながらIE8では動かないようです おや。残念でした。 こちらの環境では、ＦＦ3.5、Opera10、ＩＥ6で確認したのですが… ＩＥ8が手元にないので、何が引っかかっているのか不明ですが、targetそのものが置き換わるのが原因なのかな？ てなことで、第二弾。 （↑と同じく、こちらのテストではＯＫ：ＩＥ8は未テスト） <script type="text/javascript"> <!-- $(function(){ obj1 = $("#box"); obj1.draggable(); obj2 = "B"; obj1.mousedown( function() { obj1.html(obj2); obj1.css("height", "200px").css("backgroundColor", "red"); }); }); //--> </script> <body> <div id="box" style="width:200px; height:100px; background: #cccccc;">A</div> </div> （↑）でもinnerHTMLでtargetを一部置換えているのでそこがダメな場合は、外側のdivと同じ大きさのdivをposition:absoluteで上に重ねておいて、background-colorを設定した上で透明度を5%とかにしておくとかではダメでしょうか？（こちらでテストできないので不明） （画像のクリックをさせにくくする方法と同じですが、この場合は最初にクリックした要素をそのまま残しておくとのが目的）
お礼
ありがとうございます！ ひとまずできましたが、A要素を変化させるやり方となるのですね。 ちなみに、最初に私がやろうとしていたように、別のオブジェクトをドラッグさせる事は不可能なのでしょうか。 このために数日使ったので、悩んだ事について知りたいのです。 DOMの使用上不可能なのか、処理はややこしいけど可能なのかだけでも知りたいです。
- fujillin
- ベストアンサー率61% (1594/2576)
mousedownイベントが発生したのはobj1なので、マウスイベントを一度開放（mouseup）してあげないと、対象が変わらないのでは？ ソフト的にmouseupしてからmousedownさせればよいのだろうけれど・・・ javascriptのイベントを操作でinitEventしたりすれば可能かも知れないけれど、面倒そう。 要は対象オブジェクトを消さなければ問題ないのではないかと思って、試してみたところいけそうですね。 こんな感じでは？（ラッパーを作っているけれど、作らなくても可能） <script type="text/javascript"> <!-- $(function(){ obj1 = $("#box"); obj1.draggable(); obj2 = '<div style="width:200px;height:200px;background:red;">B</div>'; obj1.mousedown( function(){ obj1.html(obj2); } ); }); //--> </script> <body> <div id="box"> <div style="width:200px; height:100px; background: #cccccc;">A</div> </div> </body>
お礼
ありがとうございます。 残念ながらIE8では動かないようです。 できたと思ったのですが、残念です。
お礼
ありがとうございます！ すごいです。 このやり方で、IEとそれ以外の処理分岐を追加すれば完璧ですね。 ありがとうございました、大変勉強になりました。