web-dev-qa-db-ja.com

Uncaught TypeError：$（...）。draggableは関数ではありません

こんにちは皆さん、私はいくつかのdivをドラッグ可能にしようとしていますが、jquery-uiでそれを行うことができました。 2つのdivを削除し、それらを1つに結合するスクリプトもあります（それらがマージされている場合など）が、新しい「マージされた」divでドラッグ可能な関数を呼び出すと、タイトルがエラーになります...何が問題ですか ？ .draggable関数が（同じファイル上の）別の場所では機能せず、ある場所で機能する可能性はどのようにありますか？

これはドラッグ可能な関数です。

function drag($class){
$("."+$class).draggable({
containment: ".tab-content",
grid: [ 3, 3 ],
zIndex:100,
obstacle: "#nothere",
preventCollision: true,
drag:
function(){
    $(".test").css("background-color","red");
    $(this).css("background-color","green");
    }

});
}

最初に私はそれをエラーなしで完全に機能するテストクラスのために呼び出しました

drag("test");

しかし、マージ関数内でもう一度呼び出すと、エラーが返されます：Uncaught TypeError：$（...）。draggableは関数ではありません

drag("test:not(.ui-draggable)");

jsファイルは正しくロードされます：

<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
jqueryjquery-uidraggabletypeerror
4
zouzou b lebiane

私はこれが古い質問であることを知っていますが、私は同じ問題を抱えていて答えを見つけることができなかったので...

正しいスクリプトをすべて含め、リンクが有効であることなどを確認しましたが、それでも機能しませんでした。

次に、スクリプト参照を.draggableを呼び出すコードの真上に移動しました。これは完全に機能します。

<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 type="text/javascript">
            $(function () {
                $(".regionStyle li").draggable();
                $(".regionStyle").droppable({
                    drop: function (event, ui) {
                        $(this)
                        .addClass("ui-state-highlight")
                        .find("p")
                        .html("Item Dropped!");
                    }
                });
            });
0
Gary

プロジェクトには、必ず次のファイルを含めてください。

  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

それらを確認してください 例 。開発ツール（ChromeではF12）を使用して、すべてのリソースがインポートされているかどうかを確認します。

4
Beri