<button id="item-1" class="item one">1</button>

<button id="item-2" class="item two">2</button>

<button id="item-3" class="item three">3</button>

​

<div id="zone-1" class="dropzone one"></div>

<div id="zone-2" class="dropzone two"></div>

<div id="zone-3" class="dropzone three"></div>

* {

  user-select: none;

}

​

html,

body {

  padding: 0;

  margin: 0;

}

​

.item {

  background: black;

  color: white;

  width: 75px;

  height: 50px;

  position: absolute;

  display: flex;

  justify-content: center;

  align-items: center;

  color: white;

  border: 0;

  font-size: 12px;

}

​

.item:focus {

  border: 1px solid blue;

}

​

.ds-selected {

  outline: 3px solid black;

  outline-offset: 3px;

}

​

.dropzone {

  width: 150px;

  height: 200px;

  background: #eee;

  margin: 20px;

  padding: 20px;

  top: 80px;

  border: 1px solid #ccc;

  position: absolute;

}

​

$bgs: (1: #cfc, 2: #ccf, 3: #fcc);

@each $i, $bg in $bgs {

  .item:nth-child(#{$i}) {

    top: 20px;

    left: 20 + (($i - 1) * 100px);

  }

  #zone-#{$i} {

    left: ($i - 1) * 200px;

  }

  #zone-#{$i}.ds-dropzone-ready {

    background: $bg;

  }

  @if $i != 3 {

    .ds-droppable-zone-#{$i} {

      background: $bg;

    }

  }

}

.ds-droppable {

  color: red;

}

.ds-droppable-zone-1.ds-droppable-zone-2.ds-droppable-zone-3 {

  background: orange;

}

.ds-dropped-target {

  background: gold;

  color: black;

}

.ds-dropped-target::before {

  content: 'was dropped';

  position: absolute;

  bottom: 0;

}

.ds-dropped-inside::after {

  content: 'is inside';

  position: absolute;

  top: 0;

}

.ds-dropzone-target {

  background: gold;

}

​

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

​

const ds = new DragSelect({

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

        dropZones: [

            { element: document.querySelector('#zone-1'), id: 'zone-1', droppables: document.querySelectorAll('#item-1,#item-3') },

            { element: document.querySelector('#zone-2'), id: 'zone-2', droppables: document.querySelectorAll('#item-2,#item-3') },

            { element: document.querySelector('#zone-3'), id: 'zone-3' },

        ],

    });

​

/*

    ____                   _____      __          __ 

   / __ \_________ _____ _/ ___/___  / /__  _____/ /_

  / / / / ___/ __ `/ __ `/\__ \/ _ \/ / _ \/ ___/ __/

 / /_/ / /  / /_/ / /_/ /___/ /  __/ /  __/ /__/ /_  

/_____/_/   \__,_/\__, //____/\___/_/\___/\___/\__/  

                 /____/                              

​

STAR THIS PLUGIN ON GITHUB:

​

https://github.com/ThibaultJanBeyer/DragSelect

​

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

Thanks You

*/