JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/interact.js/1.10.11/interact.min.js"></script>

<div id="canvas">
<div class="centerVerticalGuideline"></div>
<div class="centerHorizontalGuideline"></div>
  <div class="dragElement"></div>
</div>

CSS

#canvas{
  position: relative;
    width: 770px;
    height: 433.13px;
    border: 1px solid #ccc;
    margin: 0 auto;
    overflow: hidden;
    margin-bottom: 20px;
    background: #fffffc;
}

.dragElement{
  position: absolute;
  width: 200px;
  height: 200px;
  background: #4aaee7;
}

.centerVerticalGuideline{
  border-left: 1px solid;
    position: absolute;
    width: 0px;
    height: 500px;
    top: 0;
    z-index: 100;
    left: 50%;
}

.centerHorizontalGuideline{
  border-top: 1px solid;
    position: absolute;
    width: 100%;
    height: 0;
    top: 50%;
    z-index: 100;
    left: 0;
}

JavaScript

interact('div#canvas .dragElement').draggable({
				modifiers: [
					interact.modifiers.snap({
						targets: [
						{ x: 195, range: 20 },
						{ y: 228, range: 20 }],
						relativePoints: [{
							x: 0,
							y: 0
						}]
					})],
			  onmove: function (event) {
					let target = event.target;
						
					let x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx;
					let y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
					
					target.style.left = `${x}px`;
					target.style.top = `${y}px`;
					
					target.setAttribute('data-x', x);
					
					target.setAttribute('data-y', y);
				
			  }
			})