CODEWITHSUNDEEP
htmljquery
California and Nevada
California and Nevada

Reputation: 55

How to make a draggable element using JQuery?

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>

Upvotes: 0

Views: 2943

Answers (2)

Ajith Gopi
Ajith Gopi

Reputation: 1846

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>

Upvotes: 2

Zak
Zak

Reputation: 7523

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>

Upvotes: 1

Related Questions