Geek Answers Handbook

JQuery TypeError: $ ("img"). draggable (); not a function

Hi, I have had a problem with this code for the last 3 hours and I hope someone can help me here.

JQuery

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

HTML header

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

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

My code works fine on codecademy.com , but when I run it on a local host or my server, I keep getting this error message, What am I doing wrong here?

Full 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>
+6
source share
1 answer

You are not loading jquery, but only jquery-ui. jquery itself does not load jquery-ui, so you need 2 different 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>
+13
source

More articles:


All Articles