人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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>

●質問者: hananomai
●カテゴリ:コンピュータ ウェブ制作
✍キーワード:CSS firefox IE jQuery MOVE
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● kent0608
●60ポイント ベストアンサー

私の環境では現象が再現できなかったのですが、<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;
}
◎質問者からの返答

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

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

<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>

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ