<button type="button" class="item one">1</button>

<button type="button" class="item two">2</button>

<button type="button" class="item three">3</button>

<button type="button" class="item four">4</button>

​

* { user-select: none; }

​

.item {

  width: 50px;

  height: 50px;

  position: absolute;

  color: white;

  border: 0;

  background: hotpink;

  top: 10%;

  left: 10%;

}

​

.ds-selected {

  outline: 3px solid black;

  outline-offset: 3px;

  color: black;

  font-weight: bold;

}

​

.item:nth-child(2),

.item:nth-child(4) { top: 50% }

.item:nth-child(3),

.item:nth-child(4) { left: 50% }

​

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

​

const ds = new DragSelect({

  selectables: document.querySelectorAll('.item')

});

​