Draggable不工作模态内弹出

我试图实现交换使用dragging和dropping股利。它没有模式弹出工作正常。Draggable不工作模态内弹出

但是，当我在模态弹出窗口中实现相同的拖放操作时不起作用。

我错过了什么？

HTML

<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button> 

<!-- Modal --> 
<div id="myModal" class="modal fade" role="dialog"> 
    <div class="modal-dialog"> 

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

    <div class='droppable'> 
    <div class="draggable">Draggable 2</div> 
    </div> 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     </div> 
    </div>  
    </div> 
</div>

的javaScript

$(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(); 
      }); 
     } 
    });

Draggable Demo

Draggable Demo inside modal popup

来源

2016-02-10 BKM

首先，别忘了在你的小提琴中加入jquery和jquery u：D – stefanz

如果你观察到：-P – BKM

已经加入了外部资源，但你有一些尺寸问题修正了它拖拽的外观更好@BKM –