jQueryでオブジェクトをドラッグする際に要素の置き換えを実現する方法
- オブジェクトAをドラッグする際に、mousedownかdragstartの段階で要素をBに置き換える動きを実現する方法はありますか？
- 現在のソースコードでは、Aをドラッグすると一度解除してからBをドラッグする必要があります。1回のモーションでBをドラッグさせる方法を教えてください。
- 使用しているjQueryの関数やメソッドについて、どのように活用すれば要素の置き換えを実現できるのか、具体的なソースコード例を教えてください。
- ベストアンサー
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をドラッグさせたいのです。 宜しくお願いします。
- 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では動かないようです。 できたと思ったのですが、残念です。
関連するQ&A
- 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>エリア内でスクロール しませんでした。？？？) どなたか、よきアドバイスをお願いします。
- 締切済み
- JavaScript
- jquery uiが動かない
jquery uiが動きません。 何度も見直し、プログラムを書いてもどこがいけないかわかりません。 教えていただけたら幸いです。お願いいたします <html> <head> <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"> <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script> <script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script> </head> <body> <div id="box">box</div> <style> #box{ width:100px; height:100px; background:red; } </style> <script> $(function(){ $("#box").draggable( axis: 'x'; ); }); </script> </body> </html>
- ベストアンサー
- JavaScript
- 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>
- ベストアンサー
- JavaScript
- JQUERYのいくつかが順番によって機能しなくなり
JQUERYのいくつかが順番によって機能しなくなります。 干渉を起こしているのかと思うのですが、どうすれば解決できるのでしょうか？var j = jQuery.noConflict();などをやってみましたが、知識不足でうまくいきませんでした。 ・top messageのみ動く。 var j = jQuery.noConflict(); <!--page-scroll--> <script type="text/javascript" src="js/jquery-1.8.3.js"></script> <script type="text/javascript" src="js/jquery.page-scroller.js"></script> ・fontsizeとtop messageのみ動く。 <!--script--> <a href="#main" class="gotop"></a> <!--top message--> <script type="text/javascript" src="js/jquery-1.8.3.js"></script> <script type="text/javascript" src="js/message.js"></script> <!--fontsize--> <script type="text/javascript" src="js/jquery-1.8.3.js"></script> <script type="text/javascript" src="js/jquery.textresizer.min.js"></script> <script> $(function(){ $("h1+ul a").textresizer({ target: "#contentsrighttop,.copyright,address,div#list div p",type: "fontSize",// サイズ指定方法 sizes: [ "13px", "15px", "20px"],// フォントサイズ selectedIndex: 1 // 初期表示 }); }); </script> <!--page-scroll--> <script type="text/javascript" src="js/jquery-1.8.3.js"></script> <script type="text/javascript" src="js/jquery.page-scroller.js"></script> <!--script end--> <!--fontsize--> <script type="text/javascript" src="js/jquery-1.8.3.js"></script> <script type="text/javascript" src="js/jquery.textresizer.min.js"></script> <script> jQuery(function(){ jQuery("h1+ul a").textresizer({ target: "#contentsrighttop,.copyright,address,div#list div p",type: "fontSize",// サイズ指定方法 sizes: [ "13px", "15px", "20px"],// フォントサイズ selectedIndex: 1 // 初期表示 }); }); </script> <!--top message--> <script type="text/javascript" src="js/jquery-1.8.3.js"></script> <script type="text/javascript" src="js/message.js"></script> <!--script end-->
- 締切済み
- JavaScript
- jqueryにて
こちらではお初にお世話になります。 よろしくおねがいします！ さて、jqueryを用いてScrollFollowを実装中なのですが、 正常に動作させることが出来ません。 ソースは <script type="text/javascript" src="./jslib/ui.core.js"></script> <script type="text/javascript" src="./jslib/jquery-1.2.6.js"></script> <script type="text/javascript" src="./jslib/jquery.scrollfollow.js"></script> <script type="text/javascript" src="./jslib/jquery.easing.1.3.js"></script> <script type="text/javascript" src="./jslib/jquery.cookie.js"></script> <script type="text/javascript"> $( document ).ready( function (){ $('test').scrollFollow({ }); }); </script> をヘッド部分に、 <div id="test"> コンテンツ </div> をBODYに記述しています。 動作せずにFirefoxのエラーコンソールで確認したところ エラー: jQuery is not defined ソースファイル: （省略）update/jslib/ui.core.js 行: 238 エラー: $("test").scrollFollow is not a function ソースファイル: http://contest2009.thinkquest.jp/tqj2009/110392/update/ 行: 13 と表示されました。jsファイルの生存は確認できており、 その系統のミスではないと思うのですが。。。 どなたかアドバイスをお願いします！
- ベストアンサー
- JavaScript
- jQueryのタブにスクロールバーをつけたい
jQueryのタブにスクロールバーをつけたい jQueryの「ui.tabs.js」を使ってタブを制作し、「jquery.cookie.js」でタブの内容を記憶し。 さらに、そのタブの中身が設定した枠を超えると「jScrollPane.js」を使って横にスクロールバーがでるようにしたいのですがうまくいきません。 <script src="./js/jquery-1.2.6.js" type="text/javascript"></script> <script src="./js/jquery.cookie.js" type="text/javascript"></script> <script src="./js/ui.core.js" type="text/javascript"></script> <script src="./js/ui.tabs.js" type="text/javascript"></script> <script src="./js/jScrollPane.js" type="text/javascript"></script> <script src="./js/jquery.mousewheel.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { $('#container1 > ul').tabs({ event: 'click' ,cookie: { expires: 30 } , cache: true}); $('#fra_sl').jScrollPane({scrollbarWidth:13, scrollbarMargin:9}); }); </script> <body> <div id="container1"> <ul> <li id="tab1"><a href="#tab_categry">タブ1</a></li> <li id="tab2"><a href="#tab_all">タブ2</a></li> </ul> <div id="pane1"> <div id="tab_categry"> <p>中身１(省略)</p> </div> <div id="tab_all"> <p>中身2(省略)</p> </div> </div> </div> </body> 以前同じような質問をされていた方がいたのでそちらも参考にして試してみたのですが→http://okwave.jp/qa/q4819862.html javascriptは初心者なものでよくわかりませんでしたorz どなたかわかる方がいましたら教えてもらえないでしょうか？？
- ベストアンサー
- JavaScript
- prototype+jquery+プラグイン
prototype.jsとjqueryとプラグイン系の読み込み方が良くわかりません。 クロスブラウザ対応のMP3プレイヤーを導入したく追加したのですが 順番を並べ変えたりいろいろしましたが導入する事ができずにこまっています。 何かいい方法はないでしょうか？ エラーの内容も順序によって様々です・・・・ <script type="text/javascript" src="prototype.js"></script> <script type="text/javascript" src="lightbox.js"></script> <script type="text/javascript" src="lightbox_shortcut_keys_addon.js"></script> <script type="text/javascript" src="slide3/script/jquery-1.2.2.js"></script> <script type="text/javascript" src="jquery.cycle.all.js"></script> <script type="text/javascript" src="jquery.easing.1.3.js"></script> <script type="text/javascript" src="jquery.jcarousel.pack.js"></script> <script type="text/javascript"> jQuery.noConflict(); var $j = jQuery; </script> 以下追加===================================================== <script type="text/javascript" src="jquery-1.4.2.js"></script> <script type="text/javascript" src="jquery.compat-1.3.js"></script> <script type="text/javascript" src="jquery.jplayer.min.js"></script> <script type="text/javascript"> jQuery.noConflict(); var $j = jQuery; $j(document).ready(function(){ $("#mp3").jPlayer(); }); </script>
- 締切済み
- JavaScript
- jQueryについて質問です。
jQueryについて質問です。 複数のプラグインを一つのページに組み込み同時に使いたいのですが、 それぞれが干渉しているのかどれか一つしか使えません。 http://solidstate.jp/Navigation/treeMenu/script_54.html http://solidstate.jp/ContentsDisplay/accordion/script_130.html http://solidstate.jp/Navigation/houseOfCake/script_172.html こちらに紹介されている記事を参考に <script type="text/javascript" src="jquery-1.3.2.min.js"></script> <script type="text/javascript" src="jquery.navigmenu.js"></script> <script type="text/javascript"> $(function(){ $('#menu').navigmenu(); }); </script> <script type="text/javascript" src="accordian.pack.js"></script> <script type="text/javascript"> window.onload = function() { new Accordian('basic-accordian',5,'header_highlight'); } </script> <script src="lib/jquery.js" type="text/javascript"></script> <script src="lib/jquery.cookie.js" type="text/javascript"></script> <script src="jquery.treeview.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ $("#filetree").treeview({//ターゲットとなる要素に付加するID animated: "fast", //アニメーション設定（削除するとアニメ無し） collapsed: true, //開閉設定（削除するとロード時にメニューを全開） unique: true, //動作設定（削除すると自動的に閉じなくなる） persist: "cookie", //Cookie }); }); </script> このような記述を行いました。 ですが、動くのはひとつだけです。 これらを同時に動かすにはどうすればよいでしょうか？ 優先順位は上からです。
- ベストアンサー
- JavaScript
- IEでのjQuery の実装について
教えてください。 現在、jQuery の jqplot を利用してグラフの表示を検討しております。 HTML（ブラウザ：IE,chrome）での表示は問題なく行われますが、 HTMLをASPファイル内に組み込んでページを表示させようとすると chromeでは問題なくグラフが表示されますが、IEではエラーが発生します。 IEでも動作するようにするためのアドバイスをお願いします。 以下、ロジックです。 <!-- jQuery グラフ表示部 ここから --> <script language="javascript" type="text/javascript" src="../jQuery/jquery-1.9.0.min.js"></script> <!--[if lt IE 9]> <script language="javascript" type="text/javascript" src="../jQuery/excanvas.min.js"></script> <![endif]--> <script language="javascript" type="text/javascript" src="../jQuery/jquery.jqplot.min.js"></script> <script language="javascript" type="text/javascript" src="../jQuery/jqplot.barRenderer.min.js"></script> <script language="javascript" type="text/javascript" src="../jQuery/jqplot.categoryAxisRenderer.min.js"></script> <link rel="stylesheet" type="text/css" href="../jQuery/jquery.jqplot.min.css" /> <script> jQuery( function() { jQuery . jqplot( 'jqPlot-sample', [ [ [ '4月', 65 ], [ '5月', 72 ], [ '6月', 74 ], [ '7月', 63 ], [ '8月', 85 ], [ '9月', 90 ] ] ], { animate: true, seriesDefaults: { renderer: jQuery . jqplot . BarRenderer, }, axes: { xaxis: { renderer: jQuery . jqplot . CategoryAxisRenderer, } } } ); } ); </script> <!-- jQueryグラフ表示部 ここまで --> html部分 <div id="jqPlot-sample" style="height: 300px; width: 300px;"></div>
- 締切済み
- JavaScript
- jquery ulのtab切り替えについて
昨日からjqueryを使ってみたのですが、どうしてもうまく表現できません。 書籍のwebcreators６月号を参考にしてほぼそのままのソースを打ち込んだのですが、CSSとJavascriptが機能していません。 ソースは <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <link href="../js/jquery.ui/themes/flora/flora.all.css" rel="stylesheet" type="text/css" title="Flora(Default)" /> <script language="JavaScript" type="text/javascript" src="../js/jquery.ui/ui/ui.tabs.js"></script> <script language="JavaScript" type="text/javascript" src="../js/jquery.ui/jquery-1.2.6.js"></script> <script type"text/javascript"> $(window) .bind ('load',function(){ $('#container-1>ul').tabs(); }); </script> <title>無題ドキュメント</title> </head> <body> <div id="container-1" > <ul> <li><a href="#fragment-1"><span>ホワイト</span></a> </li> <li><a href="#fragment-2"><span>ブラック</span></a></li> </ul> <div id="fragment-1"> <p>ページ１</p> <p>ダミー</p> </div> <div id="fragment-2" style="margin-top:150px;"> <p>ページ２</p> <p>ダミー</p> </div> </div> </body> </html> となっています。 javascriptについてはあまり知識がないので、どの部分が悪いのか教えて頂けないでしょうか？ 皆様お忙しい中ご迷惑をおかけしますが、よろしくお願いいたします。
- 締切済み
- JavaScript
お礼
ありがとうございます！ すごいです。 このやり方で、IEとそれ以外の処理分岐を追加すれば完璧ですね。 ありがとうございました、大変勉強になりました。