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

【问题标题】：First time trying to create a draggable div in jQuery but it doesn't work第一次尝试在 jQuery 中创建可拖动的 div 但它不起作用
【发布时间】：2022-07-20 02:03:08
【问题描述】：

我眼中的代码没有任何问题，它应该可以工作，但没有。为什么我创建的 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>

【问题讨论】：

让它position:absolute ?
您可以使用 HTML5 拖放 API。在该元素上设置draggable=true 以使对象可拖动。你可以在这里找到一个例子web.dev/drag-and-drop/…

标签： javascript jquery jquery-ui

【解决方案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>

【讨论】：