0

I'm trying to make an element draggable using JQuery I tried this but it didn't work because the scripts are not working and it looks like there isn't a link. Here is my code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>  
    <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.7.1.custom.min.js"></script>
    <script>
        $( function() {
            $( "#drag" ).draggable();
        });
    </script>
    <style>
        #drag {
            width: 100px;
            height: 100px;
            cursor: all-scroll;
            background-color: aqua;
        }
    </style>
</head>
<body>
   <div id="drag"></div> 
</body>
</html>
California and Nevada
  • 55
  • 7

2 Answers2

1

The order in your code plays an important role in things .. You need to load your scripts AFTER the DOM loads .. Also -- Religiously view your DevTools F12 -- The console gives vital information about DOM elements not being found, loaded etc etc ..

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>  

    <style>
        #drag {
            width: 100px;
            height: 100px;
            cursor: all-scroll;
            background-color: aqua;
        }
    </style>
</head>
<body>
   <div id="drag"></div> 
    <script
  src="https://code.jquery.com/jquery-3.6.0.min.js"
  integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
  crossorigin="anonymous"></script>
<script
  src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"
  integrity="sha256-eGE6blurk5sHj+rmkfsGYeKyZx3M4bG+ZlFyA7Kns7E="
  crossorigin="anonymous"></script>
    <script>
        $( function() {
            $( "#drag" ).draggable();
        });
    </script>
</body>
</html>
Zak
  • 6,976
  • 2
  • 26
  • 48
1

it looks like you did not have the files js/jquery-1.3.2.min.js and js/jquery-ui-1.7.1.custom.min.js present in your file system. I have replaced the files with CDN.

Find CDN here:

https://cdnjs.com/libraries/jquery https://cdnjs.com/libraries/jqueryui

It doesn't necessarily need to be written after page load. But it can increase initial load time in some cases!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>  
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" integrity="sha512-uto9mlQzrs59VwILcLiRYeLKPPbS/bT71da/OEBYEwcdNUk8jYIy+D176RYoop1Da+f9mvkYrmj5MCLZWEtQuA==" crossorigin="anonymous"></script></script>
    <script>
        $( function() {
            $( "#drag" ).draggable();
        });
    </script>
    <style>
        #drag {
            width: 100px;
            height: 100px;
            cursor: all-scroll;
            background-color: aqua;
        }
    </style>
</head>
<body>
   <div id="drag"></div> 
</body>
</html>
Ajith Gopi
  • 1,509
  • 1
  • 12
  • 20
  • do I need to include the "integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous"" inside the 2 scripts – California and Nevada Apr 09 '21 at 20:35
  • I personally would not use the JavaScript in the `` Or above the `DOM` for that matter. -- See my answer .. [REFERENCE](https://stackoverflow.com/questions/1638670/javascript-at-bottom-top-of-web-page) – Zak Apr 09 '21 at 20:38
  • @Zak I usually write my jQuery on head so that I can isebit outside `$(document).ready()`. The file will be cached on first load, and that wouldn't make much of a difference I hope. – Ajith Gopi Apr 09 '21 at 21:13