1

現在monacaにてjqueryを使って画像のドラッグ&ドロップをしようとしていますがうまくいきません。
headerでjqueryを読み込み

jQuery("#hogeDrag").draggable();

このようにしてますができません
ちなみに画像ではなくても動きません
画面が固定されていないのとは関係があるんでしょうか
よろしくお願いします。
ヘッダ

<script src="js/jquery2.1.3.min.js"></script>
<script src="js/jquery.ui.min.js"></script>

html

<div id="draggable" class="ui-widget-content">
  <p>Drag me around</p>
</div>

js

  $(function() {
    $( "#draggable" ).draggable();
  });

css

#draggable { width: 150px; height: 150px; padding: 0.5em; }

このようになっておりますよろしくお願い致します。

unarist
  • 14,871
  • 5
  • 35
  • 78
user9548
  • 11
  • 2
  • 丁寧にありがとうございます！ ただ記載ミスで、uiも読み込んでいます。 原因がわからず数日泣きそうです – user9548 Apr 30 '15 at 06:57
  • jQuery UIを読み込んでいるのであればソースを載せた方が良いですよ。ソースがなければ回答が付きづらい質問だと思います。たぶん最小コードで動かすのが一番の近道でしょうけど･･･ – kotatsu Apr 30 '15 at 08:25
  • 同じ構成に変更しましたが動きますね。JavaScript側の問題ではないことになりますが、一度確実に動く小さいサンプルから所望の構成へ作りなおしてみてはいかがでしょうか。 – kotatsu Apr 30 '15 at 09:28
  • @user9548 kotatsuさんのスニペットをそちらで実行してみていただくのと併せて、ブラウザのJavascriptコンソールにエラーが出ていないか確認してください。 – unarist Apr 30 '15 at 09:31

1 Answers1

2

draggable()はjQuery UIのメソッドです。
jQuery UIも読み込む必要があります。

$(function(){
    $('#draggable').draggable();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />

<div id="draggable" style="width: 100px; height: 100px; background: #eeddcc;">
    <p>drag me</p>
</div>
kotatsu
  • 2,142
  • 4
  • 17
  • 31