jQuery Draggable拖动特效的用法（附带实例）

使用拖动（Draggable）特效可以在 DOM 元素上启用，通过鼠标可以将指定元素拖动到指定区域。

【实例】使用拖动特效实现将指定元素拖动到指定区域。程序开发步骤如下：

新建一个 index.html 文件；
复制 jQuery UI 文件夹的 jquery-ui-1.13.2.custom，和 index.html 放置在一起；
使用 VS Code 打开 index.html 文件，在 index.html 文件中编写如下代码实现拖动特效：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="jquery-ui-1.13.2.custom/jquery-ui.css" />
<script src="jquery-ui-1.13.2.custom/external/jquery/jquery.js"></script>
<script src="jquery-ui-1.13.2.custom/jquery-ui.js"></script>
<title>拖动特效（Draggable）的使用</title>
<style>
#draggable { width: 150px; height: 150px; padding: 0.5em; }
</style>
<script>
$(function() {
    $("#draggable").draggable();
});
</script>
</head>
<body>
<div id="draggable" class="ui-widget-content">
    <p>请拖动我！</p>
</div>
</body>
</html>

使用 Chrome 浏览器运行 index.html 文件，效果如下图所示：

图 1 拖动前

图 2 拖动后

jQuery Draggable拖动特效的用法（附带实例）

相关文章