How to drop draggable item depending on it's position

The code below creates draggable element when we press "+" . When we drag and drop item on other item, this item inserts after. I want to make next :

when i drop item to the right side of element, it inserts After and when i drop item to the left side, it inserts before. I can see, where i drop it with console, but what should i change in code to make it work right? If i put a line "zone.insertBefore(currentDrag.node, e.target.nextElementSibling);" inside "ondragend" function, it doesn’t work and shows me an error.

let counter = 0;
    let currentDrag;

    document.addEventListener('click', e => {
        if (e.target.classList.contains('new-item')) {
            const newItem = createItem();
            const zone = getCurrentZone(e.target);

            zone.insertBefore(newItem, zone.lastElementChild)
        }

    });

    document.addEventListener('dragstart', (e) => {
        const zone = getCurrentZone(e.target);

        if (zone) {
            currentDrag = { startZone: zone, node: e.target };
            e.dataTransfer.setData('text/html', 'dragstart');
        }
    });

    document.addEventListener('dragover', (e) => {
        const zone = getCurrentZone(e.target);

        if (zone) {
            e.preventDefault();
        }
    });

    document.addEventListener('drop', (e) => {
        e.preventDefault();


        const zone = getCurrentZone(e.target);


        if (currentDrag) {
         /* if (e.target.classList.contains('item')) {
                let centerX = e.target.offsetLeft + e.target.offsetWidth / 2;

                ondragend = function (event) {
                    if (event.clientX < centerX) {
                        console.log('leftside', e.target.textContent);


                    }
                     else if (event.clientX > centerX) {
                        console.log('rightside', e.target.textContent);

                    }
                }

            }*/


//-------------------------------Here i check position of dropped item---------------------------------
            if (zone && currentDrag.startZone !== zone || currentDrag.startZone === zone) {
                if (e.target.classList.contains('item')) {
                    let centerX = e.target.offsetLeft + e.target.offsetWidth / 2;

                    ondragend = function (event) {
                        if (event.clientX < centerX) {
                            console.log('leftside', e.target.textContent);


                        }
                        else if (event.clientX > centerX) {
                            console.log('rightside', e.target.textContent);

                        }
                    }
                    zone.insertBefore(currentDrag.node, e.target.nextElementSibling);

                } else {
                    zone.insertBefore(currentDrag.node, zone.lastElementChild);
                }
            }


            currentDrag = null;
        
        }
    });

    function createItem(background) {
        const newDiv = document.createElement('div');

        counter++;

        if (background) {
            newDiv.style.background = `url(${background})`;
            newDiv.style.backgroundSize = `cover`;
        } else {
            newDiv.textContent = counter;
        }
        newDiv.classList.add('item');
        newDiv.draggable = true;

        return newDiv;
    }

    function getCurrentZone(from) {
        // return from.parentNode;
        // return from.closest('.drop-zone');

        do {
            if (from.classList.contains('drop-zone')) {
                return from;
            }
        } while (from = from.parentElement);

        return null;
    }
.container {
            display: flex;
            padding: 30px;
            height: 500px;
        }

        .drop-zone {
            display: flex;
            flex-basis: 50%;
            flex-wrap: wrap;
            align-content: start;
            padding: 15px;
            border: 3px dashed #b3b3b3;
            border-radius: 10px;
        }

        .item, .new-item {
            margin: 0 10px 10px 0;
            display: flex;
            justify-content: center;
            align-items: center;
            color: hsla(0, 0%, 40%, 1);
        }

        .item, .new-item {
            border: 2px dashed #783db3;
            border-radius: 10px;
            width: 50px;
            height: 50px;
            cursor: move;
            user-select: none;
        }

        .new-item {
            cursor: pointer;
            border: 2px dashed #b3b3b3;
            font-size: 16px;
        }
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="container text-center">
<div class="container">
    <div class="drop-zone">
        <div class="new-item">+</div>
    </div>

    <div class="drop-zone">
        <div class="new-item">+</div>
    </div>


</div>
</body>
</html>

88 thoughts on “How to drop draggable item depending on it's position”

  1. i need a loan no job bad credit, i need a loan my credit is bad. i need loan need loan need a loan fast i need a loan but keep getting declined, 24 hr cash advance loans, cash advance loans, cash advance online, cash advance settlement loans. Business is typically viewed investment, financial institution .

    Reply

Leave a Comment