jqueryのdraggableの勉強をしています。

下記のソースでドラッグはできるのですが、ドラッグ終了時にalert()が呼ばれません。
一応ドラッグ中に半透明になります。ちなみにIE,Firefoxいずれでも呼ばれません。
alertが動かない理由、又は留意すべき点などを教えて頂けると助かります。
よろしくお願いいたします。
<head>/*cssは省略しています*/
<script type="text/javascript" src="js/jquery-1.3.1.js"></script>
<script type="text/javascript" src="js/ui.core.js"></script>
<script type="text/javascript" src="js/ui.draggable.js"></script>
</head>
-------------
<body>
<div id ="target">draggable</div>
<script type="text/javascript">
$('#target').draggable({
opacity:0.5,
cursor:"move",
stop:function(){alert("foo");}
});
</script>
</body>

回答の条件
  • 1人2回まで
  • 登録:2009/02/04 18:05:33
  • 終了:2009/02/05 10:23:41

ベストアンサー

id:kent0608 No.1

kent0608回答回数220ベストアンサー獲得回数232009/02/04 21:46:12

ポイント60pt

私の環境では現象が再現できなかったのですが、<script></script>の処理が何かの拍子にDOMツリーの構築が完了する前に処理されるときちんと動作しなくなるので、

<script type="text/javascript">
$('#target').draggable({
   opacity:0.5,
   cursor:"move",
   stop:function(){alert("foo");}
});
</script>

の部分を

<script type="text/javascript">
$(function(){
   $('#target').draggable({
      opacity:0.5,
      cursor:"move",
      stop:function(){alert("foo");}
   });
});
</script>

に直してみてください。

(参考)

ready() [jQuery]|Ajax入門|Ajaxの基礎と応用の学習|StudyNet

DOMツリーが構築されるタイミングは、ブラウザによって異なってくるので、クロスブラウザ対策が必要ですが、jQueryは、ブラウザの違いを吸収し、簡単に表記できるようにしています。

ちなみにCSSは適当にこう書いて確認しました。

#target {
	background-color: #CCCC33;
	height: 200px;
	width: 500px;
}
id:hananomai

回答ありがとうございました。ご指摘の点は以前から試していたのですが、同じでした。

その後読み込むスクリプトの問題であることがわかりました。(実際には下記のように変更しました。)

<script src="http://code.jquery.com/jquery-latest.js"></script>

<script src="http://ui.jquery.com/testing/ui/ui.core.js"></script>

<script src="http://ui.jquery.com/testing/ui/ui.draggable.js"></script>

2009/02/05 10:23:28

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません