jQuery UI 实例 - 拖动（Draggable）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI 拖动(Draggable) - 简单示例</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<style>
#draggable { width: 100px; height: 100px; background: red; cursor: move; }
</style>
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(function() {
$("#draggable").draggable();
});
</script>
</head>
<body>
<div id="draggable">拖动我</div>
</body>
</html>这段代码演示了如何使用jQuery UI的draggable()方法使一个元素可拖动。在页面加载完成后，通过调用$("#draggable").draggable();使得ID为draggable的元素具备拖动功能。这个示例简单明了，适合初学者学习和实践。
评论已关闭