https://jsfiddle.net/yt1wvc76/
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="vl">
</div>
<div id="draggable" class="ui-widget-content">
<p>Drag me around</p>
</div>
В следующем Jsfiddle - перетаскиваемый элемент. Но я хотел, чтобы пользователи могли только перетаскивать вверх и вниз и влево-вправо (после того, как он будет помещен в середину, он автоматически переместит значок влево / вправо в зависимости от того, где пользователь разместил (зеленая вертикалка). линия пример для показа)).