jQuery UIのdraggableについて

解決済

質問者：tk-u33
質問日時：2009/09/01 14:34
回答数：2件

こちらでは初めて質問させていただきます。
よろしくお願いします。

現在、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>エリア内でスクロール
しませんでした。？？？)

どなたか、よきアドバイスをお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： yyr446
回答日時：2009/09/01 19:48

まず<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等) 或いは表現の方法(仕様)のどちらなのでしょうか？

補足日時：2009/09/02 09:56

通報する

- 0
- 件

通報する

No.2

回答者： yyr446
回答日時：2009/09/02 11:35

＞＞「根本的にやり方を変えた方が簡単なような気がします。

」
というのは、他の方法(使用言語・TOOL等) 或いは表現の方法(仕様)のどちらなのでしょうか？

両方です。
TOOLの面からは、Query UI の draggable に無い機能をむりやりもたせるのはどうかと思いました。
表現の方法(仕様)の面からは、何故スクロール<div>エリア外にドラッグしたいのかの理由がわかりませんが、本当に必須機能なのかなあと思いました。