<div class="root">
  <div class="items">
    <button type="button" class="item one" data-color="green">
      <span class="icon">🤦‍♀️</span>
      <span class="text">
        Stupidity
      </span>
    </button>
    <button type="button" class="item two" data-color="red">
      <span class="icon">🍄</span>
      <span class="text">
        Arrogance
      </span>
    </button>
    <button type="button" class="item three" data-color="blue">
      <span class="icon">🎫</span>
      <span class="text">
        Racism
      </span>
    </button>
    <button type="button" class="item four" data-color="yellow">
      <span class="icon">🎭</span>
      <span class="text">
        Egoism
      </span>
    </button>
  </div>
  <div id="trash">
      <div class="trash-icon">
        <div class="trash-icon-trash"></div>
        <div id="trash-zone" class="trash-icon-bin">
          🗑️          
        </div>
      </div>
      <div class="trash-text">Trash Bin</div>
      <div id="list"></div>
  </div>
</div>

* { user-select: none; }

html, body {
  font-family: sans-serif;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
}

.root {
  display: grid;
  width: 100%;
  height: 100%;
  grid-template-columns: 1fr auto;
}

#trash {
  width: 200px;
  text-align: center;
  align-self: center;
}

.trash-icon {
  position: relative;
}

.trash-icon-trash {
  position: absolute;
  bottom: 0;
  left: 35%;
  width: 60px;
  font-size: 30px;
  transform: translate(0, -30%);
}

.trash-icon-bin {
  position: relative;
  font-size: 80px;
  z-index: 2;
}

.item {
  width: 80px;
  height: 80px;
  color: black;
  border: 0;
  position: absolute;
  transform: translate(-50%, -50%);
}

.item.one {
  background: rgba(0,255,0,.3);
  left: 15%;
  top: 20%;
}

.item.two {
  background: rgba(255,0,0,.3);
  left: 40%;
  top: 20%;
}

.item.three {
  background: rgba(0,0,255,.3);
  left: 15%;
  top: 75%;
}

.item.four {
  background: rgba(255,255,0,.3);
  left: 40%;
  top: 75%;
}

.item:focus {
  border: 1px solid blue;
}

.icon {
  font-size: 20px;
  display: block;
}

.ds-selected {
  outline: 3px solid rgba(0, 255, 255);
  outline-offset: 3px;
  font-weight: bold;
}

#list {
  text-decoration: line-through;
  color: red;
  text-align: left;
  padding: 0 25px;
}

.remove {
  animation: removing 500ms normal forwards;
  animation-fill-mode: forwards;
}

@keyframes removing {
  0% {
     transform: translate(-50%, -50%) scale(1)
  }
  99% { 
    transform: translate(-50%, -50%) scale(0);
  }
  100% {
    transform: translate(-50%, -50%) scale(0);
    display: none;
  }
}

const ds = new DragSelect({
  selectables: document.querySelectorAll('.item'),
  dropZones: [{
    id: 'trash',
    element: document.querySelector('#trash-zone')
  }],
  useTransform: false
});

ds.subscribe('callback', ({ dropTarget }) => {
  console.log('drop', dropTarget)
  if(!dropTarget?.itemsDropped.length) return
   
  list.innerText = ''
  dropTarget.itemsDropped.forEach((item) => {
     list.innerText += `\n🧻 ${item.querySelector('.text').innerText}`
     ds.removeSelectables(item, true)
     item.classList.add('remove')
   })
   document.querySelector('.trash-icon-trash').innerText = '🧻'.repeat(dropTarget.itemsDropped.length)
})

const list = document.querySelector('#list')

/*  
STAR THIS PLUGIN ON GITHUB:
https://github.com/ThibaultJanBeyer/DragSelect

Please give it a like, this is what makes me happy :-)

Thanks You
*/