Неправильное положение во время анимации

Question

У меня есть два swap-able divs, используя JQuery Drag and Drop.

Когда я пытаюсь обменивать divs, используя перетаскивание позиции divs во время анимации, не является правильным. Переключение divs происходит правильно, но проблема во время анимации.

HTML

<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal" id="toz">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(); 
     }); 
    } 

}); 

Fiddle demo of problem

Answer 1

Простое изменение абсолютного на фиксированной работал. Fiddle

function swap($el, fromPos, toPos, duration, callback) { 
    $el.css('position', 'fixed') 
     .css(fromPos) 
     .animate(toPos, duration, function() { 
     if (callback) callback(); 
     }); 
    }