写一个可拖动的布局

为了创建一个可拖动的布局，我们可以使用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 dragging
            currentX = 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属性性能更好。

posted @ 2024-12-21 06:21  王铁柱6  阅读(22)  评论(0)    收藏  举报