JSFiddle - React, Tailwind, and code Playground

HTML

<a draggable="true">item1</a>
<a draggable="true">item2</a>
<a draggable="true">item3</a>
<a draggable="true">item4</a>


<div id="cart">
    drop here
    <ul id="list">
        <li><a href="#">stuff 1</a></li>
        <li><a href="#">stuff 1</a></li>
        <li><a href="#">stuff 1</a></li>
        <li><a href="#">stuff 1</a></li>
    </ul>
</div>

CSS

a[draggable="true"]{
    background: pink;
    padding: 10px;
    display: inline-block;
}

#cart{
    margin-top: 200px;
    padding: 10px;
    width: 400px;
    height: 200px;
    background: grey;
}
#cart.activate{
    background: green;
}

#cart.ontop{
    background: red !important;
}

JavaScript

var cart = document.getElementById('cart');
  var list = document.getElementById('list');

  document.addEventListener('dragstart', function(event){
    cart.classList.add('activate');
    console.log('start');
  });
  
  document.addEventListener('dragend', function(event){    
    cart.classList.remove('ontop', 'activate');
    console.log('stop');
  });  
  cart.addEventListener('dragenter', function(event){    
    cart.classList.add('ontop', 'activate');
    console.log('enter');
  });
  cart.addEventListener('dragover', function(event){
    event.preventDefault();
    event.dataTransfer.dropEffect = 'copy'; 
    console.log('drop');      
  });

  cart.addEventListener('dragleave', function(event){
    if(event.pageX <  cart.offsetLeft || event.pageX > cart.offsetLeft+cart.offsetWidth ||
       event.pageY > cart.offsetTop || event.pageY < cart.offsetTop + cart.offsetHeight)   {    
           cart.classList.remove('ontop');
            console.log('leave');
    }
  });