First time trying to create a draggable div in jQuery but it doesn't work-CodePudding

The code in my eyes has nothing wrong with it it should have worked but didn't. Why is the div I created not draggable?

</html>
<!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>
</head>
<body>
<div id="drag">
        <p>content</p>
    </div>
    
<style>
        #drag {

            background-color: rgb(89, 0, 255);
            height: 60px;
            width: 150px;
        }

</style>
<script>
$(document).ready(()=>{
 $(function () {
                $("#drag").draggable();
               });
               
                       })
</script>
</body>
</html>

CodePudding user response：

You should include the following references in the project:

Additionally you have to define the <style> element inside the <head></head> block.

<!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>
    <!-- The following references have been added to the project. -->
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
    <script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>    
    <!-- The <style> element has been moved inside the <head> block. -->
    <style>
        #drag {
            background-color: rgb(89, 0, 255);
            height: 60px;
            width: 150px;
        }
    </style>
</head>
<body>
  <div id="drag">
      <p>content</p>
  </div>
  
  <script>
    $(document).ready(() => {
     $(function () {
        $("#drag").draggable();
       });      
     })
  </script>
</body>
</html>