为了创建一个可拖动的布局，我们可以使用HTML、CSS和JavaScript。以下是一个简单的示例，其中包含一个可拖动的<div>元素：
HTML
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Draggable Layout</title><link rel="stylesheet" href="styles.css">
</head>
<body><div id="draggable" class="draggable-box">Drag me!</div><script src="script.js"></script>
</body>
</html>
CSS (styles.css)
body {display: flex;justify-content: center;align-items: center;height: 100vh;margin: 0;background-color: #f5f5f5;
}.draggable-box {width: 200px;height: 200px;background-color: #3498db;color: white;display: flex;justify-content: center;align-items: center;font-size: 24px;cursor: move; /* Cursor indicates draggable element */user-select: none; /* Prevent text selection */
}
JavaScript (script.js)
我们将使用原生JavaScript来实现拖动功能。
document.addEventListener('DOMContentLoaded', function() {var draggable = document.getElementById('draggable');var isDragging = false;var currentX, currentY, initialX, initialY, offsetX = 0, offsetY = 0;draggable.addEventListener('mousedown', function(e) {initialX = e.clientX - offsetX;initialY = e.clientY - offsetY;if (e.target === draggable) {isDragging = true;}});window.addEventListener('mouseup', function() {isDragging = false;});window.addEventListener('mousemove', function(e) {if (isDragging === true) {e.preventDefault(); // Prevent selection while draggingcurrentX = e.clientX - initialX;currentY = e.clientY - initialY;offsetX = currentX;offsetY = currentY;setTranslate(currentX, currentY, draggable);}});function setTranslate(xPos, yPos, el) {el.style.transform = "translate3d(" + xPos + "px, " + yPos + "px, 0)";}
});
这个示例创建了一个可拖动的<div>元素。当用户按下鼠标按钮并拖动时，该元素会跟随鼠标移动。我们使用transform: translate3d()来移动元素，这通常比直接修改元素的top和left属性性能更好。
