title: Semantic UI Modal Dragging
body: <p>I would like for the user to be able to drag the modal box to a different position, like how it can be done with the JQuery UI dialog.</p>
  
  <p>I found on the official Semantic-UI documentations, there is the setting <strong>"detachable"</strong> for modal, which seems to have the description I'm after. However, even setting it to true doesn't seem to let me drag the modal around. Could someone please help me on this?</p>
  
  <p>Here's the code thus far:</p>
  
  <pre class="lang-js prettyprint-override"><code>var aFunction = function()
  {
      $('.modal').modal({detachable: true, closable: false, transition: 'fade up'});
      $("#aBtn").on("click", function(){
          $('.modal').modal('show');
      });
  }
  $(document).ready( aFunction );
  </code></pre>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="ui basic large modal"&gt;
    &lt;i class="close icon"&gt;&lt;/i&gt;
    &lt;div class="header"&gt;
      Archive Old Messages
    &lt;/div&gt;
    &lt;div class="content"&gt;
      &lt;div class="image"&gt;
        &lt;i class="archive icon"&gt;&lt;/i&gt;
      &lt;/div&gt;
      &lt;div class="description"&gt;
        &lt;p&gt;Your inbox is getting full, would you like us to enable automatic archiving of old messages?&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="actions"&gt;
      &lt;div class="two fluid ui inverted buttons"&gt;
        &lt;div class="ui red basic inverted button"&gt;
          &lt;i class="remove icon"&gt;&lt;/i&gt;
          No
        &lt;/div&gt;
        &lt;div class="ui green basic inverted button"&gt;
          &lt;i class="checkmark icon"&gt;&lt;/i&gt;
          Yes
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>