- 締切済み
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>エリア内でスクロール しませんでした。？？？) どなたか、よきアドバイスをお願いします。
- tk-u33
- お礼率50% (1/2)
- JavaScript
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- yyr446
- ベストアンサー率65% (870/1330)
＞＞「根本的にやり方を変えた方が簡単なような気がします。」 というのは、他の方法(使用言語・TOOL等) 或いは 表現の方法(仕様)のどちらなのでしょうか？ 両方です。 TOOLの面からは、Query UI の draggable に無い機能をむりやりもたせるのはどうかと思いました。 表現の方法(仕様)の面からは、何故スクロール<div>エリア外にドラッグしたいのかの理由がわかりませんが、本当に必須機能なのかなあと思いました。
- yyr446
- ベストアンサー率65% (870/1330)
まず<script></script> …… (1)の件ですが、これだけではよくわかりませんが<html>の前にきちんとDOCタイプ宣言をすればよろしいのではないかと。 jQuery UIのdraggableですが、これはdraggableにした要素のcssポジショニングプロパティのtop属性値とleft属性値をセットするだけで、ポジショニングの方法(absoluteとかrelative)までは設定できません。 よって、#b要素と#c要素が素直に#aの中にあれば省略値”position:relative”となって#aに結びつき外に出せません。 ご提示のソースでは、 #b { width:60px; height:40px; background:lime; position:absolute; top:10px; left:50px } として、明示的に"position:absolute"を指定しているので、#aとの結びつきは無くなり、外にでますが#aの管轄外になるので、#aの中ではスクロールしません。 そこで、ui.droppable.jsのメソッドと併用して、draggableが終わって、 #aの中にdroppableされたら"position:relative”、外なら"position:absolute" にするようにしてみたら、ほぼうまくいきましたが、いまひとつ動きが変(2回操作するとうまくゆく)です。 改造すればうまくいくかもしれませんが、根本的にやり方を変えた方が簡単なような気がします。 ＜draggable()とdroppable()を使ったサンプル＞ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja-JP"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Cache-Control" content="no-cache" /> <meta http-equiv="Expires" content="0" /> <title>xxx</title> <link type="text/css" href="./jslib/jqueryUI/development-bundle/themes/base/ui.all.css" rel="stylesheet" /> <script type="text/javascript" src="./jslib/jquery.js"></script> <script type="text/javascript" src="./jslib/jqueryUI/development-bundle/ui/ui.core.js"></script> <script type="text/javascript" src="./jslib/jqueryUI/development-bundle/ui/ui.draggable.js"></script> <script type="text/javascript" src="./jslib/jqueryUI/development-bundle/ui/ui.droppable.js"></script> <style type="text/css"> #a { height:300px; width:300px; overflow:scroll; border:solid 1px Black; } #b { width:60px; height:40px; background:lime; position:absolute; top:75px; left:50px } #c { width:60px; height:40px; background:lime; position:absolute; top:125px; left:50px } </style> <script type="text/javascript" charset="utf-8"> window.onload = function () { $j = jQuery.noConflict(); $j("#b").draggable({ stop: function(event, ui){ $j(this).css({ position:"absolute" }); $j("#a").droppable({ drop: function(event, ui){ $j("#a > .ui-draggable").css({ position:"relative" }); }, out: function(event, ui){ $j("#a > .ui-draggable").css({ position:"absolute" }); }}); }}); $j("#c").draggable({ stop: function(event, ui){ $j(this).css({ position:"absolute" }); $j("#a").droppable({ drop: function(event, ui){ $j("#a > .ui-draggable").css({ position:"relative" }); }, out: function(event, ui){ $j("#a > .ui-draggable").css({ position:"absolute" }); }}); }}); } </script> </head> <body> <div id="a" > <span id="b">Drag Element1</span> <span id="c">Drag Element2</span> </div> </body>
補足
ご回答頂きましてありがとうございます。 早速記述して頂いたサンプルをもとに改造を試みてみます。 ちなみに、「根本的にやり方を変えた方が簡単なような気がします。」 というのは、他の方法(使用言語・TOOL等) 或いは 表現の方法(仕様)のどちらなのでしょうか？
お礼
早速のご回答、ありがとうございます。 記述して頂いたサンプルをもとに試行錯誤しております。 ある程度の時間をかけて試みますが、不可能のようであれば 表現の方法(仕様)を再考してみます。 アドバイスありがとうございました。