- ベストアンサー
jQueryを用いたドラッグ＆ドロップについて
jQueryを用いてドラッグ＆ドロップによって要素を移動できるプログラムを書いています。 draggableとdroppableによって「要素を移動しました」とメッセージを表示させる事は出来ましたが、ドロップした所へ要素をcloneでコピーし、appendで追加するとその要素はドラッグ出来ません。 その原因として、javascriptが読み込まれた後に生成された要素に対してjavascriptが機能しないからだと思っています。 目的としましては、 １．要素をドラッグ＆ドロップで移動可能とし、 ２．ドロップされた所へ要素を挿入し、 ３．ドロップされた順番に整列を行い、 ４．また他の要素内へドラッグ可能 とした機能を実現したいと考えています。 特に３番目の「ドロップされた要素をドロップした要素内に整列を行う」箇所に重点をおいています。 アドバイス宜しくお願いします。
- g_tales
- お礼率50% (1/2)
- JavaScript
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
jQueryはよく知らないけど、関連サイトを頼りにやってみました。 それっぽくはなったみたいだけど、参考になるだろうか。 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>jQuery UI Draggable - Default functionality</title> <script type="text/javascript" src="../../jquery-1.3.2.js"></script> <script type="text/javascript" src="../../ui/ui.core.js"></script> <script type="text/javascript" src="../../ui/ui.draggable.js"></script> <script type="text/javascript" src="../../ui/ui.droppable.js"></script> <style type="text/css"> .hoge { float: left; width: 50px; height: 50px; border: 1px solid; } .piyopiyo, .fugafuga { width: 200px; height: 200px; border: 1px solid red; } </style> <script type="text/javascript"> $(function() { $('.hoge').draggable({ helper: 'clone' }); $('#piyo').droppable({ accept: '.hoge', activeClass: 'active', drop: function(e, ui) { ui.draggable.appendTo(this); } }); $('#fuga').droppable({ accept: '.hoge', activeClass: 'active', drop: function(e, ui) { ui.draggable.appendTo(this); } }); }); </script> </head> <body> <div id="piyo" class="piyopiyo"> <p>piyo</p> </div> <div id="fuga" class="fugafuga"> <p>fuga</p> </div> <div id="hoge1" class="hoge"> <p>hoge1</p> </div> <div id="hoge2" class="hoge"> <p>hoge2</p> </div> <div id="hoge3" class="hoge"> <p>hoge3</p> </div> <div id="hoge4" class="hoge"> <p>hoge4</p> </div> <div id="hoge5" class="hoge"> <p>hoge5</p> </div> <div id="hoge6" class="hoge"> <p>hoge6</p> </div> </body> </html> 参考にしたサイトです。詳細はこちらで。 StackTrace http://stacktrace.jp/ Draggable解説 http://stacktrace.jp/jquery/ui/interaction/draggable.html Droppable解説 http://stacktrace.jp/jquery/ui/interaction/droppable.html 関連ファイルはこちらから。 jQuery UI download http://jqueryui.com/download
その他の回答 (1)
こういう感じでしょうか？ --- <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>test</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js" type="text/javascript"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js" type="text/javascript"></script> <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css" type="text/css" /> <style type="text/css"> * { margin: 0; padding: 0; } .container { float:left; height:150px; margin:10px; padding:8px; width:150px; list-style-type: none;} .container p { margin-bottom: 6px; } .container li { width: 120px; } </style> <script type="text/javascript"> $(function(){ $('ul.container').addClass('ui-widget-header').droppable({ drop: function(event, ui){ if (event.target != ui.draggable.parent().get(0)) { ui.draggable.draggable('option', 'revert', false).appendTo(this).css({'left':'','top':''}).draggable('option', 'revert', true); } } }).children('li').addClass('ui-widget-content').draggable({revert: true}); }); </script> </head> <body> <ul class="container" id="A"> <p>Drop here A</p> <li>item A1</li> <li>item A2</li> <li>item A3</li> </ul> <ul class="container" id="B"> <p>Drop here B</p> <li>item B1</li> <li>item B2</li> <li>item B3</li> </ul> </body> </html>
関連するQ&A
- ｊQueryでシンプルドラッグドロップがまずい
Javascript,jQuery初心者です。主にWINDOWS7、GoogleChrome使用です。 ｊQueryでシンプルなドラッグドロップ自作をやってみました。 <!DOCTYPE html> <html> <head> <meta carset="utf-8"> <script src="js/jquery-1.11.0.min.js"></script> <style> #chr{ position:absolute; left:100px; top:100px; } </style> <body> <div id="msg"></div> <div id="chr"> <img src="parts/usl470.jpg"> </div> <script> dragflg=false; $("#chr").mousedown(function(){ dragflg=true; $("#msg").html("on")}) .mouseup(function(){ dragflg=false; $("#msg").html("up")}); $(window).mousemove(function(e){ if(dragflg) { $("#chr").css("left",e.clientX-20+"px") .css("top",e.clientY-20+"px"); } }); </script> </body> </head> </html> mousedown、mouseupの検出を確認するために、隅にon、upと表示するようにしてあります。 思惑通り、押すとon、離すとupが表示されますが、ドラッグドロップした後は、離している状態のupになってくれず、押さずに動かしても#chrはついてきてしまいます。まともなドラッグドロップと違い、もう１回クリックでやっと離してくれる、という具合です。 #chr上でボタンを離している時はそれを検出するんじゃないのか？と思ってしまうのですが、ついでに、ドラッグ動作自体も、移動禁止マークが出てちょっとおかしいし、詳しい人はどうやってこういう症状を回避してドラッグドロップの動作を実現しているのでしょうか？ ネットで見て回って参考にしようにも、短くてシンプルなjQueryのドラッグドロップのサンプルが見つからず、ここで何が間違いなのか意見を仰ごうと思ったものです。手っ取り早くｊQueryUIを導入すれば、やりたいこと自体は出来るんでしょうけど、ボタン離していても検出できないのが何なのかは、すっきりしておきたいと思いました。どうかよろしくお願いします。
- ベストアンサー
- JavaScript
- jqueryを利用してインラインフレームに画像をドラッグ&ドロップした
jqueryを利用してインラインフレームに画像をドラッグ&ドロップしたい jqueryを使って、画像をドラッグしたり、それを自分で設定したエリアにドロップすることはできました そこで、インラインフレームを使って表示している外部プログラムにドロップエリアを作成し、親フレームからインラインフレームに画像をドラッグ&ドロップして要素を渡したいと思ったのですがやり方が分かりません よろしくお願いします
- ベストアンサー
- JavaScript
- jQuery UIのDroppableにて
jQuery UIのDroppable要素にDraggable要素をドロップした際に、どのDraggable要素をドロップしたのか判定したいのですが、どうすれば判定できるのでしょうか？ 例えば http://stacktrace.jp/jquery/ui/interaction/droppable.html 上記のサイトのページ下の方にあるサンプルで、blueのDraggable要素をpinkにドロップした際に、「blueの要素がドロップされたよ」みたいのをalertで出すようなことをしたいです。
- ベストアンサー
- JavaScript
- 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
- 【OpenGL ドラッグ＆ドロップのやり方教えて下さい】
現在OpenGLでプログラミングをおこなっているのですが、分からないことがあるので教えていただければと思います。 ウィンドウ内に物体を置いて、それをマウスでドラッグ＆ドロップのように移動させるプログラムをgltranslateで作ってみたのですが、うまくいきません。 ドラックして移動させるという動作をどの様に実現すればよいのでしょうか？プログラミング初心者なので、わかりやすく教えていただければと思います。 また、参考になるプログラム等あるサイトなどあれば教えてください。宜しくお願いいたします。
- ベストアンサー
- C・C++・C#
- 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をドラッグさせたいのです。 宜しくお願いします。
- ベストアンサー
- JavaScript
- jqueryで、後から追加した画像もドラッグ&ドロップできるようにした
jqueryで、後から追加した画像もドラッグ&ドロップできるようにしたい 以下のようにして、画像をドラッグ&ドロップできるようにしています そこに、新たに画像をアップロードして、その画像もドラッグできるようにするところで詰まってしまいました アップロードする時に画面遷移を起こしたくなかったので、インラインフレームを使っています upload.phpでアップロードされた画像を取得して、divタグのクラス名を指定したりしてappendChildで親フレームに挿入 しかし、画像が表示されはするのですがドラッグしようとしても何も起こらない状態です Firebugでも見てみると、元の画像は <div class="dragArea ui-draggable"><img src="./img0.jpg" width="100" height="100"></div> となっていますが、アップロードした画像(新規追加した要素)は、 <div id="adddragfile"><div class="dragArea"><img src="././tmp/newimg.jpg" width="100" height="100"></div></div> となっていて、ドラッグ属性が付いていないように思えます よろしくお願いします /* include.php */ //ドラッグ可能な画像 <div class='dragArea'><img src='./img0.jpg' width='100' height='100'></div> //ここにタグを追加していく <div id='adddragfile'></div> //ドロップ先となる画像 <div class='dropArea'><img src='./img1.jpg' width='300' height='300'></div> <div class='dropArea'><img src='./img2.jpg' width='300' height='300'></div> //ファイルのアップロード <iframe title='upload_frame' name="upload_frame" style="display:none"></iframe> <form action="./upload.php" method="post" enctype="multipart/form-data" target="upload_frame"> <input type="hidden" name="max_file_size" value="1000000"> <input type="file" name="upload_image"> <input type="submit" value="画像アップロード"> </form> /* jqueryファイル */ $(function(){ $(".dragArea").draggable({ cursor:'move', helper:'clone' }); $(".dropArea").droppable({ drop:function(e,ui){ alert("ドロップされました"); } }); }); /* upload.php */ <?php $upload_dir = './tmp/'; $filename = $_FILES['upload_image']['name']; move_uploaded_file($_FILES['upload_image']['tmp_name'], $upload_dir.$filename); ?> <script type="text/javasscript"> //親フレームのオブジェクトを取得 var container = parent.document.getElementById('adddragfile'); //要素を作成していく div = parent.document.createElement('div'); div.className = "dragArea"; image = parent.document.createElement('img'); image.src = './<?php print($upload_dir.$filename);?>'; image.width = "100"; image.height = "100"; container.appendChild(div); div.appendChild(image); </script>
- ベストアンサー
- JavaScript
- DOMの要素ををtextarea(dropした位置
jquery ui のdraggable,droppableを使って、あるDOMの要素ををtextarea(dropした位置)に挿入したいです。 ドラッグ、ドロップは普通に動かせるのですが、以下の機能が実装できません。 情報お持ちの方、いらっしゃいましたら、お願いします。 ドラッグ中、または、ドロップした瞬間に、textareaのキャレット位置を取得する 実装方法が思いつきません。 (ドロップ時点です。) 欲を言えば、ドラッグ中にキャレット位置を表示させたいです。 ※ちょうど、chromeやFFで画像をテキストエリアにドラッグするようなイメージです。
- ベストアンサー
- JavaScript
- jQuery toggle() 戻るで開いたままに
【jQuery toggle() で要素を開いている状態で、その要素内のリンクから外部ページへ飛び 【戻る】ボタン（or BackSpace キー）で戻ったとき、その要素を開いたままの状態にしたい】 Webデザインサイドの人間で、javascript や jQuery の理解は不足しています。 上記のような動作を実現したいのですが、 ムシの良い話であることは重々承知致しております。 javascript jQuery にお詳しい方々、 可能でしたらそのまま使用可能なような 【ソースの例示】 にて、 実現方法をご教示頂けましたら大変幸いです。 ＊ もし早めにご教授頂けましたら、尚幸いです。 宜しくお願い申し上げます。
- 締切済み
- JavaScript
- ListViewAからListViewBへのドラッグドロップ
アプリケーション内にListViewAとListViewBがあります。 ListViewAの要素の中から必要なアイテムを、ListViewBへ 好きな位置へコピーしたいのです。 そのためには、ListViewA→ListViewBにドラッグ＆ドロップが 有効かと考えたのですが、どういうソースコードで実現できるのか ご存知の方がいらっしゃいましたらご教授いただけませんでしょうか？ C++、WindowsSDKのみ（MFC、.Netは使用不可）
- ベストアンサー
- C・C++・C#
お礼
ありがとうございます。とても参考になりました。 やはりその要素自身を移動させないと、コピーした要素ではdraggableが有効になりませんでした。 参考サイト使わせて頂きます。