JSFiddle - React, Tailwind, and code Playground

HTML

<div id="canvas" class="canvas">
    <div id="1" class="inCanvas"></div>
	<div id="2" class="inCanvas"></div>
</div>
<div class="parts">
    <div id="contacts" class="draggable">
	    <p>Контакты</p>
	</div>
	<div id="date" class="draggable">
        <p>Дата выдачи талона</p>
    </div>
</div>

CSS

.canvas {
		position: absolute;
		left: 15px;
		background: #fff;
		margin: 0px;
		padding: 0px;
		width: 300px;
		height: 150px;
		border: 1px dashed #475E75;
	}
	
	.inCanvas {
		background: #fff;
		margin: 10px;
		padding: 0px;
		width: 150;
		height: 45px;
        border: 1px solid #000;
	}
	
	.parts {
		margin: 0px;
		padding: 0px;
		width: 300px;
		height: 360px;
        float: right;
	}
	#contacts, #date {
		margin: 0px 0px 5px 90px;
		padding: 5px;
		width: 150px;
        height: 35px;
		background: #fff;
		border: 1px dashed #000;
		text-align: center;
		cursor: move;
	}

JavaScript

jQuery('.draggable').draggable({
            snap: '.inCanvas',
            snapMode: 'inner',
		});