JSFiddle - React, Tailwind, and code Playground

by Twisty

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css">
<div class='abcde' style='border:1px solid blue; width:400px;height:400px;'>
  <div id="div1" style='border:1px solid red; width:50px;height:50px;'>
  </div>
</div>

JavaScript

$(function() {
  var elem = "#div1";
  var myStart;
  $(elem).draggable({
    containment: "parent",
    cursor: "move",
    scroll: false,
    addClasses: true,
    start: function(e, ui) {
      myStart = ui.position;
    },
    drag: function(e, ui) {
      if (ui.position.left < myStart.left) {
        ui.position.left = myStart.left;
      }
    },
    stop: function(e, ui) {
      //some stuff happens here, not relevant
    }
  });
});