web-dev-qa-db-ja.com

jQuery UI-ドラッグ可能は関数ではありませんか？

ページの一部のdivでドラッグ可能な効果を使用しようとしていますが、ページを読み込むたびにエラーメッセージが表示されます。

Error: $(".draggable").draggable is not a function

JQuery UI javascriptファイルが含まれていなかったため、他の人がこの問題を抱えているように見えましたが、私は間違いなく持っていました。

以下は私のページのheadタグ内にあります：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"></script>    
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>

誰でも解決策を提案できますか？

アドバイスをお願いします。

ありがとう。

クイック編集、ページのヘッドにjqueryツールjsが含まれています。これを削除すると正常に動作します。誰もがこれら2つを一緒に機能させることができましたか？

jquerydraggable
51
Dan

一般的な理由は、jqueryのロード後にjqueryuiもロードしない場合です。

例えば：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js" type="text/javascript"></script>

EDIT。各ライブラリのバージョン番号を、 jquery および jqueryui の適切な値または最新の値に置き換えます。

これで問題が解決しない場合は、他の多くの回答の提案を確認してください。

39
intotecho

質問が投稿されてから4年が経過したが、この問題に遭遇した他の人の助けになるかもしれない。答えはStackExchangeの他の場所にも投稿されていますが、リンクを失い、見つけるのは困難です。

回答：jQueryTOOLSでは、デフォルトのダウンロードを使用する場合、jQueryの「コア」も埋め込まれます。

JQueryおよびjQueryツールをロードすると、jQueryコアが2回定義され、プラグインが「設定解除」されます。 「ドラッグ可能」（jQuery-UIから）はそのようなプラグインです。

解決策は、jQueryの「コア」ファイルなしでjQueryツールを使用することで、すべてが正常に機能します。

36
Ideogram

  1. インストール jquery-ui-dist

    npm を使用します

    _npm install --save jquery-ui-dist_

    または 糸

    _yarn add jquery-ui-dist_

  2. アプリコード内にインポートする

    _import 'jquery-ui-dist/jquery-ui';_

    または

    require('jquery-ui-dist/jquery-ui');

13
srgbnd

コードがこの順序に従っていることを確認してください-

<script src="jquery.min.js"></script>
<script src="jquery-ui/jquery-ui.js"></script>
8
Arijit Basu

JQueryオブジェクトと[〜＃〜] not [〜＃〜]が要素そのものであることを確認してください。クラスごとに選択すると、期待したものが得られない場合があります。

コンソールを開き、セレクターコードが返す内容を確認します。 Firebugでは、次のようなものが表示されるはずです。

_jQuery( div.draggable )
_

配列に入り、最初の要素を取得する必要がある場合があります：$('.draggable').first()その後、そのjQueryオブジェクトでdraggable（）を呼び出して完了です。

6
Glenn

これらのjsファイルをインポートできます。私にとってはうまくいきました。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>  
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js" ></script>
4
danilobraga

通常、このエラーの原因は、おそらくbootstrapフレームワークを使用しており、すでにjqueryファイルを他の場所に配置しているためです。あなたがする必要があるのは、あなたがjqueryファイルを持っているところ、または両方の場所にjquery uiファイルを含めることです、あなたは大丈夫です...

  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js" type="text/javascript"></script>

上記のjquery uiスクリプトを、他のbootstrap=依存関係とともにjqueryファイルをインポートする場所に含めてください。

1
Fortune Ekeruo

このコードは機能しません（firebugでjQuery.uiが未定義であることを確認できます）：

<script src="http://code.jquery.com/jquery-1.4.2.min.js" type="text/javascript"></script>    
<script src="jquery-ui-1.8.1.custom.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"></script>

次のコードを使用してみてください：

<script src="http://code.jquery.com/jquery-1.4.2.min.js" type="text/javascript"></script>    
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"></script> 
<script src="jquery-ui-1.8.1.custom.min.js" type="text/javascript"></script>
1
RouR

Ionicアプリを開発している場合は、必ずionic.bundle.jsの前にjqueryとjquery-uiを含めてください！

非常に些細なことのためのそのような時間の無駄:(

1
Sergio Morstabilini

の代わりに

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"></script>    
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>

つかいます

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>  
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js" type="text/javascript"></script>
1
Harsha Biyani

jQueryツールとjQuery UIは両方ともjQuery.tabsを宣言し、競合により2番目（この場合はjQuery UI）のロードが妨げられるため、競合します。これがdraggable is not a functionエラーを受け取る理由です。

この問題の解決策は、タブ機能なしでjQueryツールのカスタムバージョンを作成することです（ here から）。

ここにある競合に関する情報： JQuery UIとJQueryツールは一緒に動作しますか？

1
clami219

これはいくつかの人に役立つかもしれません：

私の場合、最初にdraggableが依存するjsファイルをロードすることで、このエラーを取り除くことができました。それらは、ui.mouse.js、ui.core、ui.widget、つまりUIコアウィジェットファクトリーマウスインタラクションでした。

依存関係をロードするためのスクリプトタグが、ドラッグ可能なjsロードタグの上にあることを確認してください。

1
tariq

この問題は、通常のjqueryライブラリを2回インクルードする場合にも発生する可能性があります。私の体と頭には、次の行が2回ありました。

Jquery UIを使用しようとするまで、問題は発生しませんでした。

1
user2368795

ちょっと、これは私のために動作します（私はこれをGoogle APIあなたが使用していたリンクで動作させることができませんでした）：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Beef Burrito</title>
    <script src="http://code.jquery.com/jquery-1.4.2.min.js" type="text/javascript"></script>    
    <script src="jquery-ui-1.8.1.custom.min.js" type="text/javascript"></script>
    </head>
<body>
    <div class="draggable" style="border: 1px solid black; width: 50px; height: 50px; position: absolute; top: 0px; left: 0px;">asdasd</div>

    <script type="text/javascript">
        $(".draggable").draggable();
    </script>
</body>
</html>
1
Barrie Reader

私はあなたの質問と別の質問の両方を経験しました duplicate 。
最後に、次の回答が物事を整理するのに役立ちました。
キャッチされていないタイプのエラー-ドラッグ可能-関数ではない

取り除くには：

$（ "。draggable"）。draggableはもはや関数ではありません

スクリプトタグの上にJavascriptライブラリへのリンクを配置する必要がありました動作するはずです。

私のコード：

<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.min.css"/>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js" />
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" />

<script>
    $(function(){
        $("#container-speed").draggable();
    });
</script>

<div class="content">
    <div class="container-fluid">
        <div class="row">
            <div class="rowbackground"style="width: 600px; height: 400px; margin: 0 auto">
                <div id="container-speed" style="width: 300px; height: 200px; float: left"></div>
                <div id="container-rpm" style="width: 300px; height: 200px; float: left"></div>
            </div>
        </div>
    </div>
</div>
1
Moos Meijer