如何使用 JQuery 制作可拖动元素？
Posted
技术标签:
【中文标题】如何使用 JQuery 制作可拖动元素？【英文标题】：How to make a draggable element using 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 等文件的链接
【参考方案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>【讨论】：
以上是关于如何使用 JQuery 制作可拖动元素？的主要内容，如果未能解决你的问题，请参考以下文章
如何使用 jquery ui 使拖动和克隆的元素再次可拖动？
如何使用 PDF.js 和 jQuery 在 PDF 上创建可拖动元素
如何使用 jQuery UI 获取可拖动和可调整大小元素的坐标
jQuery UI - Droppable 只接受一个可拖动的