6

こんにちは、私はこの3時間このコードに問題があり、誰かがここで私を助けてくれることを願っています。

jQuery

$(document).ready(function() { 
$("img").draggable();});

HTMLヘッダー

<head>
    <title>Chess</title>
    <meta http-equiv="Content-type" content="text/html;charset=UTF-8">
    <link rel="stylesheet" type="text/css" href="reset.css" />
    <link rel="stylesheet" type="text/css" href="default.css"/>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
    <script type="text/javascript" src="default.js"></script>
</head>

FireBugエラー

TypeError: $("img").draggable is not a function [Break On This Error] $("img").draggable();

私のコードはcodecademy.comで完全に機能しますが、ローカルホストまたはサーバーで試してみると、このエラーメッセージが表示され続けます。私はここで何が間違っているのですか?

完全なHTML

    <!DOCTYPE html>
 <html>
    <head>
        <title>Chess</title>
        <meta http-equiv="Content-type" content="text/html;charset=UTF-8">
        <link rel="stylesheet" type="text/css" href="reset.css" />
        <link rel="stylesheet" type="text/css" href="default.css"/>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
        <script type="text/javascript" src="default.js"></script>
    </head>
    <body>
     <div id="board">
        <ul id="first_row">
            <li class="white_space"><img src="pieces/Rook_Black.png" /></li>
            <li class="black_space"><img src="pieces/Pawn_Black.png" /></li>
            <li class="white_space"><img src="#" /></li>
            <li class="black_space"><img src="#" /></li>
            <li class="white_space"><img src="#" /></li>
            <li class="black_space"><img src="#" /></li>
            <li class="white_space"><img src="pieces/Pawn_White.png" /></li>
            <li class="black_space"><img src="pieces/Rook_White.png" /></li>
        </ul>
        <ul id="second_row">
            <li class="black_space"><img src="pieces/Knight_Black.png" /></li>
            <li class="white_space"><img src="pieces/Pawn_Black.png" /></li>
            <li class="black_space"><img src="#" /></li>
            <li class="white_space"><img src="#" /></li>
            <li class="black_space"><img src="#" /></li>
            <li class="white_space"><img src="#" /></li>
            <li class="black_space"><img src="pieces/Pawn_White.png" /></li>
            <li class="white_space"><img src="pieces/Knight_White.png" /></li>
        </ul>
        <ul id="third_row">
            <li class="white_space"><img src="pieces/Bishop_Black.png" /></li>
            <li class="black_space"><img src="pieces/Pawn_Black.png" /></li>
            <li class="white_space"><img src="#" /></li>
            <li class="black_space"><img src="#" /></li>
            <li class="white_space"><img src="#" /></li>
            <li class="black_space"><img src="#" /></li>
            <li class="white_space"><img src="pieces/Pawn_White.png" /></li>
            <li class="black_space"><img src="pieces/Bishop_White.png" /></li>
        </ul>
        <ul id="forth_row">
            <li class="black_space"><img src="pieces/Queen_Black.png" /></li>
            <li class="white_space"><img src="pieces/Pawn_Black.png" /></li>
            <li class="black_space"><img src="#" /></li>
            <li class="white_space"><img src="#" /></li>
            <li class="black_space"><img src="#" /></li>
            <li class="white_space"><img src="#" /></li>
            <li class="black_space"><img src="pieces/Pawn_White.png" /></li>
            <li class="white_space"><img src="pieces/King_White.png" /></li>
        </ul>
        <ul id="fifth_row">
            <li class="white_space"><img src="pieces/King_Black.png" /></li>
            <li class="black_space"><img src="pieces/Pawn_Black.png" /></li>
            <li class="white_space"><img src="#" /></li>
            <li class="black_space"><img src="#" /></li>
            <li class="white_space"><img src="#" /></li>
            <li class="black_space"><img src="#" /></li>
            <li class="white_space"><img src="pieces/Pawn_White.png" /></li>
            <li class="black_space"><img src="pieces/Queen_White.png" /></li>
        </ul>
        <ul id="sixth_row">
            <li class="black_space"><img src="pieces/Bishop_Black.png" /></li>
            <li class="white_space"><img src="pieces/Pawn_Black.png" /></li>
            <li class="black_space"><img src="#" /></li>
            <li class="white_space"><img src="#" /></li>
            <li class="black_space"><img src="#" /></li>
            <li class="white_space"><img src="#" /></li>
            <li class="black_space"><img src="pieces/Pawn_White.png" /></li>
            <li class="white_space"><img src="pieces/Bishop_White.png" /></li>
        </ul>
        <ul id="seventh_row">
            <li class="white_space"><img src="pieces/Knight_Black.png" /></li>
            <li class="black_space"><img src="pieces/Pawn_Black.png" /></li>
            <li class="white_space"><img src="#" /></li>
            <li class="black_space"><img src="#" /></li>
            <li class="white_space"><img src="#" /></li>
            <li class="black_space"><img src="#" /></li>
            <li class="white_space"><img src="pieces/Pawn_White.png" /></li>
            <li class="black_space"><img src="pieces/Knight_White.png" /></li>
        </ul>
        <ul id="eight_row">
            <li class="black_space"><img src="pieces/Rook_Black.png" /></li>
            <li class="white_space"><img src="pieces/Pawn_Black.png" /></li>
            <li class="black_space"><img src="#" /></li>
            <li class="white_space"><img src="#" /></li>
            <li class="black_space"><img src="#" /></li>
            <li class="white_space"><img src="#" /></li>
            <li class="black_space"><img src="pieces/Pawn_White.png" /></li>
            <li class="white_space"><img src="pieces/Rook_White.png" /></li>
        </ul>
     </div>
    </body>
</html>
4

1 に答える 1

13

jqueryをロードしておらず、jquery-uiのみをロードしています。jquery自体はjquery-uiによってロードされないため、2つの異なるscriptタグが必要です。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
于 2013-01-26T00:26:24.003 に答える