css 实现移动多输入框

用心去追梦

于 2024-06-14 18:22:24 发布

阅读量263

点赞数 5

文章标签： css 前端

本文链接：https://blog.csdn.net/qq_33240556/article/details/139687956

版权

要使用 CSS 实现可移动的多个输入框，你可以结合 HTML、CSS 和 JavaScript 实现一个简单的拖拽功能。以下是一个示例，展示了如何使用这些技术实现这一功能：

HTML

首先，创建多个输入框，并包裹在一个容器内：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Draggable Inputs</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <div class="draggable" draggable="true"><input type="text" value="Input 1"></div>
        <div class="draggable" draggable="true"><input type="text" value="Input 2"></div>
        <div class="draggable" draggable="true"><input type="text" value="Input 3"></div>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS

接下来，定义输入框的样式和布局：

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f0f0f0;
}

.container {
    display: flex;
    gap: 10px;
}

.draggable {
    padding: 10px;
    background-color: #fff;
    border: 1px solid #ccc;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    cursor: move;
}

input {
    border: none;
    outline: none;
    font-size: 16px;
}

JavaScript

最后，添加 JavaScript 实现拖拽功能：

const draggables = document.querySelectorAll('.draggable');
const container = document.querySelector('.container');

draggables.forEach(draggable => {
    draggable.addEventListener('dragstart', () => {
        draggable.classList.add('dragging');
    });

    draggable.addEventListener('dragend', () => {
        draggable.classList.remove('dragging');
    });
});

container.addEventListener('dragover', e => {
    e.preventDefault();
    const afterElement = getDragAfterElement(container, e.clientX);
    const draggable = document.querySelector('.dragging');
    if (afterElement == null) {
        container.appendChild(draggable);
    } else {
        container.insertBefore(draggable, afterElement);
    }
});

function getDragAfterElement(container, x) {
    const draggableElements = [...container.querySelectorAll('.draggable:not(.dragging)')];

    return draggableElements.reduce((closest, child) => {
        const box = child.getBoundingClientRect();
        const offset = x - box.left - box.width / 2;
        if (offset < 0 && offset > closest.offset) {
            return { offset: offset, element: child };
        } else {
            return closest;
        }
    }, { offset: Number.NEGATIVE_INFINITY }).element;
}

解释

HTML: 包含了三个可拖动的输入框，每个输入框都包裹在一个 div 元素内，并具有 draggable 属性。
CSS: 定义了基本样式，包括容器布局、输入框样式以及拖动时的样式。
JavaScript:
- dragstart 和 dragend 事件用于添加和移除 dragging 类。
- dragover 事件用于在拖动过程中动态调整输入框的位置。
- getDragAfterElement 函数根据鼠标位置计算拖动过程中输入框应该插入的位置。