Question

我希望能够将用鼠标单击的块拖到存在多个具有相同类名的div上，并将它们拖放到具有相同类名的多个div上。我仅对一个对象进行了拖动，就可以将其拖放到div上。如何为具有相同图标类名称的每个div创建循环？
my screen

var ball = document.querySelector(".icon");
let currentDroppable = null;

ball.onmousedown = function(event) { //event mouseun hareketi

    let shiftX = event.clientX - ball.getBoundingClientRect().left; //event.clientX mouseun başlangıçtaki yeri, bu mouseun yeni pozisyonunu calculate eder
    let shiftY = event.clientY - ball.getBoundingClientRect().top;

    ball.style.position = 'absolute';
    ball.style.zIndex = 1000;
    document.body.append(ball);

    moveAt(event.pageX, event.pageY);

    function moveAt(pageX, pageY) { //elementi yeni pozisyonuna set eder
        ball.style.left = pageX - shiftX + 'px';
        ball.style.top = pageY - shiftY + 'px';
    }

    function onMouseMove(event) {
        moveAt(event.pageX, event.pageY);

        ball.hidden = true;
        let elemBelow = document.elementFromPoint(event.clientX, event.clientY);
        ball.hidden = false;

        if (!elemBelow) return;

        let droppableBelow = elemBelow.closest('.grid-item'); // en yakın grid item
        if (currentDroppable != droppableBelow) {
            if (currentDroppable) { // null when we were not over a droppable before this event
                leaveDroppable(currentDroppable);
            }
            currentDroppable = droppableBelow;
            if (currentDroppable) { // null if we're not coming over a droppable now
                // (maybe just left the droppable)
                enterDroppable(currentDroppable);
            }
        }
    }

    document.addEventListener('mousemove', onMouseMove); //mouseu taşımaya başladığında bu func çağırılır

    ball.onmouseup = function() { //mousea basmayı bıraktığın zaman olacaklar (stop moving)
        document.removeEventListener('mousemove', onMouseMove);
        ball.onmouseup = null;
        if (currentDroppable != null) { // yerleşecek yer bulduysa
            ball.style.top = currentDroppable.offsetTop + 7 + 'px';
            ball.style.left = currentDroppable.offsetLeft + 7 + 'px';
        } else { //yerleşecek yer bulamadıysa default bir yere götür
            ball.style.top = '10px';
            ball.style.left = '10px';
        }
    };

};

function enterDroppable(elem) {
    elem.style.background = 'pink';
}

function leaveDroppable(elem) {
    elem.style.background = '';
}

ball.ondragstart = function() {
    return false;
};

html,
body {
    overflow: hidden;
    z-index: 10;
}

.grid-container {
    display: grid;
    grid-gap: 5px;
    grid-template-columns: 15vh 15vh 15vh 15vh 15vh 15vh 15vh 15vh;
    grid-template-rows: 15vh 15vh;
    padding: 80px;
    position: relative;
    width: 100vw;
    height: 50vh;
}

.grid-item {
    background-color: rgba(255, 255, 255, 0.5);
    border: 1px dashed rgba(0, 0, 0, 0.8);
    padding: 20px;
    font-size: 30px;
    text-align: center;
    cursor: pointer;
}

.icon {
    border: 1px solid rgba(0, 0, 0, 0.8);
    height: 15vh;
    width: 15vh;
    background-color: rgba(62, 104, 139, 0.582);
    cursor: pointer;
    float: left;
}

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="grid.css" />
</head>

<body>
    <div class="icon"></div> <!--I want to add lots of div with icon class name here-->
    <div class="grid-container">
        <div class="grid-item">1</div>
        <div class="grid-item">2</div>
        <div class="grid-item">3</div>
        <div class="grid-item">4</div>
        <div class="grid-item">5</div>
        <div class="grid-item">6</div>
        <div class="grid-item">7</div>
        <div class="grid-item">8</div>
        <div class="grid-item">9</div>
        <div class="grid-item">10</div>
        <div class="grid-item">11</div>
        <div class="grid-item">12</div>
        <div class="grid-item">13</div>
        <div class="grid-item">14</div>
        <div class="grid-item">15</div>
        <div class="grid-item">16</div>
    </div>

    <script src="grid.js"></script>
</body>

</html>

使用纯JavaScript进行简单的拖放

0 个答案: