JSFiddle - React, Tailwind, and code Playground

by bmomani

HTML

<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css">
<link rel="stylesheet" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css">
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<script src="http://jquery-ui.googlecode.com/svn/tags/latest/external/jquery.bgiframe-2.1.2.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/i18n/jquery-ui-i18n.min.js"></script>
<a data-target="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a>

<div class="modal fade hide" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-remote="">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Modal header</h3>
  </div>
  <div class="modal-body">
      <div class="sortable-wrap">
          <ul id="sortable">
              <li class="ui-state-default">Item 1</li>
              <li class="ui-state-default">Item 2</li>
              <li class="ui-state-default">Item 3</li>
              <li class="ui-state-default">Item 4</li>
              <li class="ui-state-default">Item 5</li>
              <li class="ui-state-default">Item 6</li>
              <li class="ui-state-default">Item 7</li>
          </ul>
      </div> 
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <button class="btn btn-primary">Save changes</button>
  </div>
</div>

JavaScript

jQuery( "#sortable" ).sortable(
{containment: "parent",
cursor: "grabbing",
         opacity: 0.8,
         scrollSpeed: 40,
 placeholder: "pb-sortable-placeholder",

});