写一个块状可以拖动的布局

创建一个可拖动的块状布局，你可以使用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 Block</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="draggableBlock" class="draggable">
        <p>Drag me!</p>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS (styles.css)

.draggable {
    width: 200px;
    height: 200px;
    background-color: #4CAF50;
    color: white;
    text-align: center;
    line-height: 200px; /* Centers the text vertically */
    cursor: move; /* Changes the cursor to "move" when hovering over the element */
    position: absolute; /* Allows the element to be positioned freely */
}

JavaScript (script.js)

你可以使用原生的HTML5 Drag and Drop API，但在这个简单的例子中，我将使用mousedown, mousemove, 和 mouseup 事件来实现拖拽功能。

document.addEventListener('DOMContentLoaded', function() {
    var draggableBlock = document.getElementById('draggableBlock');
    var isDragging = false;
    var currentX, currentY, initialX, initialY;
    var offsetX = 0, offsetY = 0;

    draggableBlock.addEventListener('mousedown', function(e) {
        initialX = e.clientX - offsetX;
        initialY = e.clientY - offsetY;
        if (e.target === draggableBlock) {
            isDragging = true;
        }
    });

    window.addEventListener('mousemove', function(e) {
        if (isDragging === true) {
            e.preventDefault(); // Prevents the default behavior of the mousemove event, which is to select text or drag elements around the page.
            currentX = e.clientX - initialX;
            currentY = e.clientY - initialY;
            offsetX = currentX;
            offsetY = currentY;
            setTranslate(currentX, currentY, draggableBlock); // Sets the transform: translate() property of the element to move it to the new position.
        }
    });

    window.addEventListener('mouseup', function() {
        isDragging = false; // Stops dragging when the mouse button is released.
    });

    function setTranslate(xPos, yPos, el) { // Helper function to set the transform: translate() property of an element.
        el.style.transform = "translate3d(" + xPos + "px, " + yPos + "px, 0)"; // Uses CSS transform to move the element smoothly without affecting the layout of other elements. translate3d() is used for hardware acceleration.
    }
});

这个示例创建了一个可拖动的绿色方块。你可以通过点击并拖动它来移动它。注意，这个示例使用了transform: translate()来移动元素，这不会影响页面上的其他元素或触发重排（reflow），从而提供更流畅的拖动体验。

posted @ 2024-12-18 11:27  王铁柱6  阅读(16)  评论(0)    收藏  举报