Jquery有可拖動項目的動畫問題

我有一個jQuery腳本來交換可拖動項目的位置，但由於某些原因動畫效果在交換過程中導致視覺問題。該腳本是codef0rmer的jsfiddle的變體，我已經做了一些更改以適應我的需求。我創建了一個jsfiddle來顯示這個問題，目前我找到了來自swap函數的問題，並且已經註釋掉了可用但沒有生成動畫的行。如果任何人都可以幫助我使交換正確動畫，我會非常感激。您可以查看這裏的jsfiddle：http://jsfiddle.net/AywmJ/161/Jquery有可拖動項目的動畫問題

這是該問題源自功能（我相信）：

function swap($el, fromPos, toPos, duration, callback) { 
      $el.animate({fromPos, toPos}, duration, callback || $.noop); 
      //(callback || $.noop)(); 
     }

來源

2016-05-31 Tyharo

我更新了我的jQuery以及jsfiddle鏈接，但我仍遇到同樣的問題。 – Tyharo

您可否詳細說明_「交換過程中的視覺問題」 - 確切地說交換引發了什麼樣的視覺問題？ –

當交換元素的位置時，拖動的引腳將從不正確的方向進行動畫處理，以在交換過程中佔據位置。如果您查看jsfiddle並嘗試將某個引腳拖動到另一個引腳上，則可以在交換過程中看到問題。 – Tyharo

我不熟悉jQuery的動畫，但我發現一些事情來解決交換問題。

當你拖動佔位符（「與拖動類div標籤」）的加入SYLE性能style="position: relative; z-index: auto; left: 151px; top: 22px;"與left: 151px; top: 22px，這意味着多遠預留位置從左邊和頂部屬性的當前位置移動。

在當前的代碼你是swapping .draggable placeholders，這就是爲什麼你看到的是不尋常的行爲

而是換.draggable

<div class="pinChildContainer droppable"> 
     <div class="pins draggable"> 
      <img class="pinImage" src="img/paymentServices.jpg" alt="Payment Services" width="188" height="185" /> 
      <p class="pinTitle">Payment Services</p> 
     </div> 
</div>

變更的內容（現掉換.pins）

<div class="pinChildContainer droppable"> 
     <div class="draggable"> 
      <div class="pins"> 
        <img class="pinImage" src="img/paymentServices.jpg" alt="Payment Services" width="188" height="185" /> 
        <p class="pinTitle">Payment Services</p> 
      </div> 
     </div> 
</div>

這是交換.pins的代碼

var dragged = $(ui.draggable); 
var fromContainer = dragged.parent(); 
var toContainer = $(this); 
var displaced = $(this).find('.pins'); 

// added class .from and .to classes to identify the placeholders 
var fromPinContainer = dragged.find('.pins').removeClass('from to'); 
fromPinContainer.addClass("from"); 

displaced.removeClass('from to'); 
displaced.addClass("to"); 

if (fromContainer.is(toContainer)) { 
    dragged.animate({ left: 0, top: 0 }); 
} 

dragged.animate({ top: 0, left: 0 }); 
displaced.animate({ bottom: 0, left: 0 }, finalize); 

function finalize() { 
    fromContainer.find('.draggable').append(toContainer.find('.to')); 
    toContainer.find('.draggable').append(dragged.find('.from')); 
} 

finalize();

JSFiddle

我想這不是打磨的代碼，但它給你在找什麼效果。

來源

2016-06-09 19:47:55

非常感謝Pavan，我非常感謝！ – Tyharo

Jquery有可拖動項目的動畫問題

回答

相關問題