<div class="root">

  <div class="items">

    <button type="button" class="item one" data-color="green">

      <span class="icon">🤜🤛</span>

      <span class="text">

        Friendship

      </span>

    </button>

    <button type="button" class="item two" data-color="red">

      <span class="icon">❤️‍🔥</span>

      <span class="text">

        Love

      </span>

    </button>

    <button type="button" class="item three" data-color="blue">

      <span class="icon">🎉</span>

      <span class="text">

        Happyness

      </span>

    </button>

    <button type="button" class="item four" data-color="yellow">

      <span class="icon">👑</span>

      <span class="text">

        Success

      </span>

    </button>

  </div>

  <div id="list">

    Selected:

    <div id="selected"></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;

}

​

#list {

  width: 150px;

  padding: 25px 0 0 25px;

}

​

.items {

  display: grid;

  grid-template-rows:  repeat(2, 1fr);

  grid-template-columns: repeat(2, 1fr);

  justify-items: center;

  align-items: center;

}

​

.item {

  width: 80px;

  height: 80px;

  color: black;

  border: 0;

}

​

.item.one {

  background: rgba(0,255,0,.3);

}

​

.item.two {

  background: rgba(255,0,0,.3);

}

​

.item.three {

  background: rgba(0,0,255,.3);

}

​

.item.four {

  background: rgba(255,255,0,.3);

}

​

.item:focus {

  border: 1px solid blue;

}

​

.icon {

  font-size: 20px;

  display: block;

}

​

.ds-selected {

  outline: 3px solid lime;

  outline-offset: 3px;

  color: lime;

  background: lime !important;

}

​

.ds-selected::before {

  content: '✅';

  text-align: center;

  font-size: 20px;

}

​

.ds-selected > .icon {

  width: 0;

  height: 0;

  overflow: hidden;

}

​

.red {

  background-image: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%)

}

​

.green {

  background-image: linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%)

}

​

.blue {

  background-image: linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%)

}

​

.red.green.blue {

  background-image: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),

    linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),

    linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);

}

​

.red.green {

  background-image: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),

    linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%);

}

​

.red.blue {

  background-image: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),

    linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);

}

​

.green.blue {

  background-image: 

    linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),

    linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);

}

​

.yellow {

  animation: loading 500ms alternate infinite;

  background-size: 300% 100%;

  background-position: center;

  box-shadow: inset 0 0 100px 0 rgba(255, 255, 0, .3),

    0 0 50px 0 rgba(255, 255, 0, .7);

}

​

@keyframes loading {

  0%   { background-size: 100% 100%; }

  100% { background-size: 120% 120%; }

}

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

​

const ds = new DragSelect({

  selectables: document.querySelectorAll('.item'),

  draggability: false,

});

​

ds.subscribe('callback', ({ items }) => {

  selected.innerText = 

    `${[...items].map(item => `\n✅ ${item.querySelector('.text').innerText}`).join('')}`

  list.className = `list ${[...items].map(item => item.getAttribute('data-color')).join(' ')}`

})

​

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

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

const listItems = new Set()

​

/*  

STAR THIS PLUGIN ON GITHUB:

https://github.com/ThibaultJanBeyer/DragSelect

​

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

​

Thanks You

*/

​