JSFiddle - React, Tailwind, and code Playground

by frumbert

HTML

<script src="https://unpkg.com/plain-draggable"></script>
<main>
  <span class="drag-me p1"></span>
  <span class="drag-me p2"></span>
  
  <span class="snap-me s1"></span>
  <span class="snap-me s2"></span>

</main>

CSS

main {
  display: block;
  height: 50vh;
  position:relative;
  background-color: #ccc;
}

.drag-me, .snap-me {
  position:absolute;
}

.drag-me {
  display:inline-block;
  background-color: indigo;
  left: 10px;
  width: 20px;
  height: 20px;
}

.snap-me {
  width: 5px;
  height: 5px;
  right: 100px;
  background-color: blue;
  border-radius:100px;
}

.p1, .s1 { top: 50px }
.p2, .s2 { top: 150px }

JavaScript

const handles = document.querySelectorAll(".drag-me");
const snaps = document.querySelectorAll(".snap-me");
let isSnapped, lastDragged;

const snaptargets = Array.from(snaps).map(function(obj) {
	const bb = obj.getBoundingClientRect();
  return {x:bb.top,y:bb.left}
});

Array.from(handles).map(function(obj) {
	const draggable = new PlainDraggable(obj, {
            onMove: function (el) {
                isSnapped = !!el.snapped;
            },
            onDragStart: function (obj) {
                lastDragged = obj;
            },
            onDragEnd: function (obj) {
                console.log(isSnapped);
                if (!isSnapped) {
                    lastDragged.target.style.transform = 'none';
                    this.position();
                }
                lastDragged = undefined;
            },
            snap: {
            	targets: snaps,
              center: true,
              gravity: 10
            }
        });
})