第一次尝试在 jQuery 中创建可拖动的 div 但它不起作用

Question

我眼中的代码没有任何问题，它应该可以工作但没有。为什么我创建的 div 不可拖动？

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

Answer 1

您应该在项目中包含以下引用：

此外，您必须在 <head></head> 块中定义 <style> 元素。

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

第一次尝试在 jQuery 中创建可拖动的 div 但它不起作用

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

javascript

jquery

jquery-ui