Draggable is not working inside modal popup
<p>I trying to implement swapping of div using <code>dragging</code> and <code>dropping</code>. 
It is working fine without modal popup.</p>

<p>But the dragging and dropping is not working  when I implement the same inside the modal popup.  </p>

<p>What am I missing ?</p>

<p><strong>HTML</strong></p>

<pre><code>&lt;button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal"&gt;Open Modal&lt;/button&gt;

&lt;!-- Modal --&gt;
&lt;div id="myModal" class="modal fade" role="dialog"&gt;
  &lt;div class="modal-dialog"&gt;

    &lt;!-- Modal content--&gt;
    &lt;div class="modal-content"&gt;
      &lt;div class="modal-header"&gt;
        &lt;button type="button" class="close" data-dismiss="modal"&gt;&amp;times;&lt;/button&gt;
        &lt;h4 class="modal-title"&gt;Modal Header&lt;/h4&gt;
      &lt;/div&gt;
      &lt;div class="modal-body"&gt;
       &lt;div class='droppable'&gt;
    &lt;div class="draggable"&gt;Draggable 1&lt;/div&gt;
  &lt;/div&gt;

  &lt;div class='droppable'&gt;
    &lt;div class="draggable"&gt;Draggable 2&lt;/div&gt;
  &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="modal-footer"&gt;
        &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;    
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p><strong>javaScript</strong></p>

<pre><code>$(document).ready(function () {
      window.startPos = window.endPos = {};

      makeDraggable();

      $('.droppable').droppable({
        hoverClass: 'hoverClass',
        drop: function(event, ui) {
          var $from = $(ui.draggable),
              $fromParent = $from.parent(),
              $to = $(this).children(),
              $toParent = $(this);

          window.endPos = $to.offset();

          swap($from, $from.offset(), window.endPos, 200);
          swap($to, window.endPos, window.startPos, 1000, function() {
            $toParent.html($from.css({position: 'relative', left: '', top: '', 'z-index': ''}));
            $fromParent.html($to.css({position: 'relative', left: '', top: '', 'z-index': ''}));
            makeDraggable();
          });
        }
      });

      function makeDraggable() {
        $('.draggable').draggable({
          zIndex: 99999,
          revert: 'invalid',
          start: function(event, ui) {
            window.startPos = $(this).offset();
          }
        });
      }

      function swap($el, fromPos, toPos, duration, callback) {
        $el.css('position', 'absolute')
          .css(fromPos)
          .animate(toPos, duration, function() {
            if (callback) callback();
          });
      }
    });
</code></pre>

<p><a href="http://jsfiddle.net/BKUM/cr5w9okh/" rel="nofollow"><strong>Draggable Demo</strong></a></p>

<p><a href="https://jsfiddle.net/BKUM/DTcHh/16822/" rel="nofollow"><strong>Draggable Demo inside modal popup</strong></a></p>