與拖動和拖放交換不起作用

Question

我正在使用Jquery UI來實現DIV交換。

問題：交換問題已解決，但CSS在交換過程中遇到了一些問題。滾動條在底部出現，div也在交換過程中改變形狀。調換也在尋找這樣不專業:(

誰能告訴我如何使其順利交換

例子是here

<div class="container"> 
    <h1>Drag The Colored DIVs</h1> 
    <div class="row"> 
    <div class="col-sm-4"> 
     <div class="drophere"> 
     <div class="draghere" style="background-color:yellow;"> 
      1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 
     </div> 
     </div> 
    </div> 
    <div class="col-sm-4"> 
     <div class="drophere"> 
     <div class="draghere" style="background-color:pink;"> 
      2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 
     </div> 
     </div> 
    </div> 
    <div class="col-sm-4"> 
     <div class="drophere"> 
     <div class="draghere" style="background-color:yellow;"> 
      3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 
     </div> 
     </div> 
    </div> 
    </div> 
    <div class="row"> 
    <div class="col-sm-4"> 
     <div class="drophere"> 
     <div class="draghere" style="background-color:yellow;"> 
      4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 44 4 4 4 4 4 4 4 4 4 4 4 4 4 4 44 4 44 44 
     </div> 
     </div> 
    </div> 
    <div class="col-sm-4"> 
     <div class="drophere"> 
     <div class="draghere" style="background-color:pink;"> 
      5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 
     </div> 
     </div> 
    </div> 
    <div class="col-sm-4"> 
     <div class="drophere"> 
     <div class="draghere" style="background-color:yellow;"> 
      6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 66 6 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 

CSS：

.draghere { 
    margin:5px; 
} 

的Javascript：

$(document).ready(function() { 
    window.startPos = window.endPos = {}; 

    makeDraggable(); 

    $('.drophere').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, 20); 
     swap($to, window.endPos, window.startPos, 500, function() { 
     $toParent.html($from.css({ 
      position: 'relative', 
      left: '', 
      top: '', 
      'z-index': '' 
     })); 
     $fromParent.html($to.css({ 
      position: 'relative', 
      left: '', 
      top: '', 
      'z-index': '' 
     })); 
     makeDraggable(); 
     }); 
    } 
    }); 

    function makeDraggable() { 
    $('.draghere').draggable({ 
     zIndex: 99999, 
     opacity: 0.35, 
     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(); 
     }); 
    } 
}); 

Answer 1

你的代碼對我來說似乎很好。你所遇到的唯一小問題就是你指定的交換時間。如果您刪除20和500（指定的持續時間），它應該交換更平滑，滾動條將不再出現。

我更新了你的代碼如下：

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

[更新]如果你想保留動畫：

我JsFiddle創建了一個示例基於您的代碼。

爲了解決你的問題，我不得不採取控制的CSS。 .drophere應該有css規則來重置動畫後的形狀。