<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;

  }

}

import DragSelect from "https://unpkg.com/dragselect@latest/dist/ds.esm.min.js";

​

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

*/

​