Friends, I'm writing a small application, I'm trying to implement so that when you hover (drag) a div element over another div element, the second one is colored. The problem is that it is not possible to track the event of the transfer of one element to another.

HTML

&lt;div class="places"&gt;        &lt;!--&lt;p class="name"&gt;Canvasp> -->        <div class="place" data-id="11"></div>        <div class="place" data-id="12"></div>        <div class="place" data-id="13"></div>        <div class="place" data-id="14"></div>        <div class="place" data-id="15"></div>        <div class="place" data-id="16"></div>        <div class="place" data-id="17"></div>        <div class="place" data-id="18"></div>        <div class="place" data-id="21"></div>        <div class="place" data-id="22"></div>        <div class="place" data-id="23"></div>        <div class="place" data-id="24"></div>        <div class="place" data-id="25"></div>        <div class="place" data-id="26"></div>        <div class="place" data-id="27"></div>        <div class="place" data-id="28"></div>        <div class="place" data-id="31"></div>        <div class="place" data-id="32"></div>        <div class="place" data-id="33"></div>        <div class="place" data-id="34"></div>        <div class="place" data-id="35"></div>        <div class="place" data-id="36"></div>        <div class="place" data-id="37"></div>        <div class="place" data-id="38"></div>        <div class="place" data-id="41"></div>        <div class="place" data-id="42"></div>        <div class="place" data-id="43"></div>        <div class="place" data-id="44"></div>        <div class="place" data-id="45"></div>        <div class="place" data-id="46"></div>        <div class="place" data-id="47"></div>        <div class="place" data-id="48"></div>    </div>

JavaScript

const places= document.querySelectorAll('.place');
places.forEach(place=&gt; {
    const shape= document.querySelector('.shape');
    place.addEventListener('mousedown', ()=&gt; {
        shape.addEventListener('dragstart', (event)=&gt; {
            //console.log('dragstart');
            console.log(place.dataset.id);
        });
        shape.addEventListener('dragend', (event)=&gt; {
            //console.log('dragend');
            console.log(place.dataset.id);
        });
    });



shape is the div I'm dragging onto the other one
ANDR2022-01-22 22:00:14
where is your shape created? does it exist in html? this is not visible in the code.
DraKoan2022-01-22 22:00:14