实现将元素从a区域拖拽到b区域

晚晚的郁金香
已于 2024-06-11 11:59:59 修改
阅读量90
点赞数 3
文章标签： javascript 前端
于 2024-06-06 09:47:01 首次发布
本文链接：https://blog.csdn.net/jdhxndbeg/article/details/139473572
版权
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<style>
    .dropZone {
        width: 500px;
        height: 200px;
        background-color: #f0f0f0;
        margin-top: 20px;
        padding: 10px;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        border: 2px dashed transparent;
        transition: border-color 0.3s;
    }

    .draggableElement {
        position: relative;
        width: 100px;
        height: 100px;
        background-color: #007bff;
        color: #fff;
        text-align: center;
        line-height: 100px;
        cursor: move;
        margin-bottom: 10px;
        margin-left: 12px;
        transition: transform 0.3s, box-shadow 0.3s;
    }

    .draggableElement.dragging {
        transform: scale(1.1);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    }

    .dropZone.dragover {
        border-color: #007bff;
    }

    .actionButton {
        position: absolute;
        top: -10px;
        right: -10px;
        width: 20px;
        height: 20px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
        transition: transform 0.3s ease-in-out;
        color: white;
        text-align: center;
        line-height: 17px;
        border-radius: 50%;
        cursor: pointer;
    }

    .removeButton {
        background-color: red;
    }

    .addButton {
        background-color: green;
    }

    .actionButton:hover {
        transform: scale(1.1);
    }
</style>
</head>
<body>

<div id="dropZone1" class="dropZone"></div>
<div id="dropZone2" class="dropZone"></div>

<button id="outputButton" onclick="outputElements()">Output</button>
<button id="resetButton" onclick="resetDraggableElements()">Reset</button>

<script>
    const elementsData = [
        { id: "dragElement1", text: "Drag Me 1" },
        { id: "dragElement2", text: "Drag Me 2" },
        { id: "dragElement3", text: "Drag Me 3" }
    ];

    const dropZone1 = document.getElementById("dropZone1");
    const dropZone2 = document.getElementById("dropZone2");

    function createDraggableElement(data) {
        const dragElement = document.createElement("div");
        dragElement.id = data.id;
        dragElement.className = "draggableElement";
        dragElement.draggable = true;
        dragElement.textContent = data.text;

        const removeButton = createButton("x", "removeButton", () => moveToDropZone(dragElement, dropZone1));
        const addButton = createButton("+", "addButton", () => moveToDropZone(dragElement, dropZone2));

        dragElement.appendChild(removeButton);
        dragElement.appendChild(addButton);

        dragElement.addEventListener("dragstart", (event) => {
            event.dataTransfer.setData("text/plain", event.target.id);
            event.target.classList.add("dragging");
        });

        dragElement.addEventListener("dragend", (event) => {
            event.target.classList.remove("dragging");
        });

        return dragElement;
    }

    function createButton(text, className, onClick) {
        const button = document.createElement("div");
        button.className = `actionButton ${className}`;
        button.textContent = text;
        button.addEventListener("click", (event) => {
            event.stopPropagation();
            onClick();
        });
        return button;
    }

    function moveToDropZone(element, targetZone) {
        targetZone.appendChild(element);
        updateButtonVisibility(element, targetZone === dropZone1);
    }

    function updateButtonVisibility(element, isInitial) {
        element.querySelector(".addButton").style.display = isInitial ? "block" : "none";
        element.querySelector(".removeButton").style.display = isInitial ? "none" : "block";
    }

    elementsData.forEach((data) => {
        const dragElement = createDraggableElement(data);
        dropZone1.appendChild(dragElement);
        updateButtonVisibility(dragElement, true);
    });

    document.querySelectorAll(".dropZone").forEach((dropZone) => {
        dropZone.addEventListener("dragover", (event) => {
            event.preventDefault();
            dropZone.classList.add("dragover");
        });

        dropZone.addEventListener("dragleave", () => {
            dropZone.classList.remove("dragover");
        });

        dropZone.addEventListener("drop", (event) => {
            event.preventDefault();
            dropZone.classList.remove("dragover");
            const data = event.dataTransfer.getData("text");
            const draggedElement = document.getElementById(data);
            if (draggedElement.parentElement !== dropZone) {
                moveToDropZone(draggedElement, dropZone);
            }
        });
    });

    function resetDraggableElements() {
        document.querySelectorAll("#dropZone2 .draggableElement").forEach((element) => {
            moveToDropZone(element, dropZone1);
        });
    }

    function outputElements() {
        const elementsInDropZone2 = Array.from(document.querySelectorAll("#dropZone2 .draggableElement"));
        const innerHTMLArray = elementsInDropZone2.map((element) => {
            return elementsData.find(data => data.id === element.id);
        });
        console.log(innerHTMLArray);
    }
</script>

</body>
</html>