如何使用 JQuery 制作可拖动元素？答案

【问题标题】：How to make a draggable element using JQuery?如何使用 JQuery 制作可拖动元素？
【发布时间】：2021-07-05 17:29:17
【问题描述】：

我正在尝试使用 JQuery 使元素可拖动我试过this，但它不起作用，因为脚本不起作用，而且看起来没有链接。这是我的代码

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

【问题讨论】：

你确定你有文件js/jquery-1.3.2.min.js和js/jquery-ui-1.7.1.custom.min.js"吗？
我没有这些文件。我需要webstie.com/filename 等文件的链接

标签： html jquery

【解决方案1】：

您的文件系统中似乎没有文件js/jquery-1.3.2.min.js 和js/jquery-ui-1.7.1.custom.min.js。我已将文件替换为 CDN。

在此处查找 CDN：

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

它不一定需要在页面加载后编写。但在某些情况下它会增加初始加载时间！

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

【讨论】：

我是否需要在 2 个脚本中包含“integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ=="crossorigin="anonymous""
我个人不会在 <head> 或 DOM 以上使用 JavaScript。 -- 看我的回答..REFERENCE
@Zak 我通常将我的 jQuery 写在头上，这样我就可以在$(document).ready() 之外进行操作。该文件将在第一次加载时被缓存，我希望这不会有太大的不同。

【解决方案2】：

代码中的顺序在事物中起着重要作用..您需要在 DOM 加载后加载脚本..另外 -- 虔诚地查看您的 DevTools F12 -- 控制台提供有关 DOM 元素的重要信息未找到，未加载等..

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

【讨论】：