jquery实现可拖拽布局
warning:
这篇文章距离上次修改已过191天，其中的内容可能已经有所变动。
使用jQuery UI可以很容易地实现一个可拖拽布局。以下是一个简单的例子，演示了如何使用jQuery UI的sortable和draggable功能来创建一个可拖拽的布局。
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Draggable Layout</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<style>
#container { width: 100%; height: 500px; padding: 0; }
.box { width: 100px; height: 100px; margin: 10px; float: left; }
</style>
</head>
<body>
<div id="container">
<div class="box" style="background-color: #ff0000;">1</div>
<div class="box" style="background-color: #00ff00;">2</div>
<div class="box" style="background-color: #0000ff;">3</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script>
$(function() {
$("#container").sortable({
items: ".box"
});
$(".box").draggable({
connectToSortable: "#container",
helper: "clone",
revert: "invalid"
});
});
</script>
</body>
</html>在这个例子中，#container是一个可排序的区域，其中的.box元素可以拖动。通过draggable选项，.box元素可以被拖动到任何与之兼容的sortable区域中，包括#container本身。helper: "clone"选项意味着当拖动元素时会克隆它，这样原始元素就可以保持在原处。revert: "invalid"选项意味着如果拖动的元素没有放到一个有效的放置区域，它将在原来的位置恢复。
评论已关闭