JSFiddle - React, Tailwind, and code Playground

by Matthew Watzman

HTML

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<div class="side-menu" id="sideMenu">
  <menu>
    <ul class="nav nav-tabs nav-stacked">
      <li><a href="#myModal" data-backdrop="false" data-toggle="modal">Click Me</a>
      </li>
      <li>
        <input type='text' />
      </li>
    </ul>
  </menu>
</div>
<div id="myModal" class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title">Settings</h4>

      </div>
      <div class="modal-body">
        <p>Settings</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
    <!-- /.modal-content -->
  </div>
  <!-- /.modal-dialog -->
</div>
<!-- /.modal -->

JavaScript

$("#myModal").draggable({
    handle: ".modal-header"
  });