Dragging Images to Target Positions on Webpage

Question

This problem is a coding exercise I have got stuck on. The objective is to drag images to target positions. If the drag/drop is to the wrong place, then the drop is rejected. When all the images can be dragged to the right spots, then the program works.

This picture shows the idea:
I am stuck making a web page that allows the dots to be dragged into positions in another area on the page:

So far, I can drag the images that have to be dragged among themselves, but I cannot figure out how to get the images dragged into another area. What I have working is running here: https://legacy-systems.biz/longview2500/topics/programming/stuck_on_this/stuck_on_this.php.

The images have draggable=yes as attributes, and I have setup listeners and handlers

        function handleDragStart(e) {
        console.log('start dragStart');
        this.style.opacity = '0.4';

        dragSrcEl = this;

        e.dataTransfer.effectAllowed = 'move';
        e.dataTransfer.setData('text/html', this.innerHTML);
        console.log('end dragStart');
    }

    function handleDragEnd(e) {
        console.log('start dragEnd');
        this.style.opacity = '1';

        items.forEach(function (item) {
        item.classList.remove('over');
        });
        console.log('end dragEnd');
    }

    function handleDragOver(e) {
        console.log('start dragOver');
        e.preventDefault();
        console.log('end dragOver');
        return false;
    }

    function handleDragEnter(e) {
        console.log('start dragEnter');
        this.classList.add('over');
        console.log('end dragEnter');
    }

    function handleDragLeave(e) {
        console.log('end dragLeave');
        this.classList.remove('over');
        console.log('end dragLeave');
    }


    function handleDrop(e) {
        console.log('start handleDrop');
        e.stopPropagation();

        if (dragSrcEl !== this) {
            dragSrcEl.innerHTML = this.innerHTML;
            this.innerHTML = e.dataTransfer.getData('text/html');
        }
        console.log('end handleDrop');
        return false;
    }



    let items = document.querySelectorAll('.grid_area .grid_box');
    items.forEach(function(item) {
        item.addEventListener('dragstart', handleDragStart);
        item.addEventListener('dragover', handleDragOver);
        item.addEventListener('dragenter', handleDragEnter);
        item.addEventListener('dragleave', handleDragLeave);
        item.addEventListener('dragend', handleDragEnd);
        item.addEventListener('drop', handleDrop);
    });

I also setup tracking of where the mouse is at any given time and have the target positions mapped relative to the upper left corner of the image where all dots need to go. This array as the left, top, right and bottom of where the dots need to go within the overall target zone.

    let drops = [
    ['blue', 27, 251, 385, 156],
    ['red', 50, 876, 565, 182],
    ['green', 170, 23, 152, 303],
    ['black', 265, 395, 529, 396],
    ['black', 122, 314, 252, 445],
];

I just am not seeing what I the approach is for getting the dots to stay in their new homes.

Dragging Images to Target Positions on Webpage

Answers (1)

Related Questions