title: Jquery draggable decide how far I can grab
body: <p>I am trying to understand jquery draggable interactions, my goal is to be able to move the text only to the right 200px then stop and not to the left from it's normal position, but if it's dragged to the right I should be able to drag it back to the left. Is there a smart and easy way to acheive this? Couldn't find anything in the <a href="https://api.jqueryui.com/draggable/" rel="nofollow noreferrer">documentation</a>?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$("#drag").draggable({
    axis: "x"
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.draggable {
    width: 90px;
    height: 90px;
    padding: 0.5em;
    float: left;
    margin: 0 10px 10px 0;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" /&gt;
  
  &lt;div id="drag" class="draggable ui-widget-content"&gt;
    &lt;p&gt;I can be dragged only horizontally&lt;/p&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>