2016-02-10 67 views
0

我試圖實現交換使用draggingdropping股利。 它沒有模式彈出工作正常。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

+0

首先,別忘了在你的小提琴中加入jquery和jquery u:D – stefanz

+0

如果你觀察到:-P – BKM

+0

已經加入了外部資源,但你有一些尺寸問題修正了它拖拽的外觀更好@BKM –

回答

0

簡單地因爲... e模式默認爲display: none;,所以javascript無法找到要初始化拖動功能的元素!

您需要做的是延遲拖動功能,直到元素不顯示爲空。

比其他拖動是工作,小提琴被搞砸了,因爲它缺少jQuery的文件,也不要忘了優先jQuery的必須是要加載的第一個JS文件

https://jsfiddle.net/2eysmghe/2/

+0

但是,當我們正在交換divs動畫時移動到底部 – BKM