ドラッグ可能なアイテムのJqueryアニメーションの問題

Question

ドラッグ可能なアイテムの場所をスワップするためのjqueryスクリプトがありますが、何らかの理由でアニメーション効果によってスワップ中に視覚的な問題が発生します。このスクリプトはcodef0rmerのjsfiddleのバリエーションであり、私のニーズに合わせていくつかの変更を加えました。問題を表示するためにjsfiddleを作成しましたが、現在はスワップ機能の問題点を特定し、動作する行はコメントアウトしていますが、アニメーション化しません。スワップを正しく動かせるように誰かが私を助けることができれば、私は大いに感謝しています。あなたはここにjsfiddleを表示することができます。http://jsfiddle.net/AywmJ/161/

これは、問題は（私は信じている）から発信されていることの関数である：

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

Answer 1

私はjqueryのアニメーションに精通していないが、私は修正するために、いくつかのものを見つけましたスワップの問題。

あなたは（「ドラッグ可能なクラスを持つdivタグ」）が追加syleプロパティプレースホルダは、leftとtop属性を持つ現在の位置から移動してきたどのくらい意味left: 151px; top: 22pxとstyle="position: relative; z-index: auto; left: 151px; top: 22px;"、プレースホルダをドラッグすると。あなたが異常な動作

が代わりに

<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を入れ替える）へ

<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> 

.draggable変更の内容を入れ替えることを見ている理由ですあなたが swapping .draggable placeholdersある現在のコードで

、

.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

私はそれが磨かれたコードではないだと思うが、それはあなたが探しているものの効果を与えます。