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;
}
ul{
    pointer-events: none;
}

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){
    cart.classList.remove('ontop');
    console.log('leave');
  });