Thiết kế website giá rẻ

Question

I drag off elements and when they overlap they don’t send the server message (checked through networking).

There is no glitches in the UI.

I don’t have much details about the problem that’s all i know.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Element Combiner</title>
    <style>
    </style>
</head>
<body>
    <div id="sidebar">
        <div class="draggable" id="fire" draggable="true">🔥 Fire</div>
        <div class="draggable" id="earth" draggable="true">🌍 Earth</div>
        <div class="draggable" id="water" draggable="true">💧 Water</div>
        <div class="draggable" id="wind" draggable="true">🌬️ Wind</div>
    </div>
    <div id="drop-area"></div>

    <script>
let draggedElement = null;
    let offsetX = 0, offsetY = 0;

    document.querySelectorAll('.draggable').forEach(item => {
        item.addEventListener('dragstart', (e) => {
            e.dataTransfer.setData('text/plain', e.target.id);
            draggedElement = e.target.cloneNode(true);
            draggedElement.style.position = 'absolute';
            draggedElement.style.zIndex = 100;

            const rect = e.target.getBoundingClientRect();
            offsetX = e.clientX - rect.left;
            offsetY = e.clientY - rect.top;

            document.body.appendChild(draggedElement);

            draggedElement.style.left = `${e.clientX - offsetX}px`;
            draggedElement.style.top = `${e.clientY - offsetY}px`;

            document.addEventListener('mousemove', onMouseMove);
            document.addEventListener('mouseup', onMouseUp);
        });
    });

    function onMouseMove(event) {
        if (draggedElement) {
            draggedElement.style.left = `${event.clientX - offsetX}px`;
            draggedElement.style.top = `${event.clientY - offsetY}px`;
        }
    }

    function onMouseUp(event) {
        if (draggedElement) {
            document.removeEventListener('mousemove', onMouseMove);
            document.removeEventListener('mouseup', onMouseUp);
            
            const dropArea = document.getElementById('drop-area');
            const dropRect = dropArea.getBoundingClientRect();
            const elRect = draggedElement.getBoundingClientRect();

            if (elRect.left < dropRect.right &&
                elRect.right > dropRect.left &&
                elRect.top < dropRect.bottom &&
                elRect.bottom > dropRect.top) {

                const dropTarget = draggedElement.cloneNode(true);
                dropTarget.classList.remove('draggable');
                dropTarget.classList.add('drop-target');
                dropTarget.style.position = 'absolute';
                dropTarget.style.left = `${event.clientX - dropArea.getBoundingClientRect().left - offsetX}px`;
                dropTarget.style.top = `${event.clientY - dropArea.getBoundingClientRect().top - offsetY}px`;

                dropArea.appendChild(dropTarget);
                makeDraggable(dropTarget);
            }

            document.body.removeChild(draggedElement);
            draggedElement = null;
        }
    }

    function makeDraggable(element) {
        element.addEventListener('mousedown', (e) => {
            const rect = element.getBoundingClientRect();
            const offsetX = e.clientX - rect.left;
            const offsetY = e.clientY - rect.top;

            function moveAt(x, y) {
                element.style.left = `${x - offsetX}px`;
                element.style.top = `${y - offsetY}px`;
            }

            function onMouseMove(event) {
                moveAt(event.clientX, event.clientY);
            }

            document.addEventListener('mousemove', onMouseMove);
            document.addEventListener('mouseup', () => {
                document.removeEventListener('mousemove', onMouseMove);
            }, { once: true });
        });
    }
    </script>
</body>
</html>

I tried methods to see what part wasn’t working the server was fine its just the element combining functionality wont work.

Thiết kế website giá rẻ

Danh mục

Why wont the drag and drop handling work?