jquery.swapAnimate.js

GitHub - https://github.com/Urushibara/jquery.swapAnimate.js

シンプルな使い方:
$("#elem1").swapAnimate($("#elem2"));

オプション:
$("#elem1").swapAnimate($("#elem2")[, { <option>:<value> [, <option>:<value>...] } ]);

speed Number default: 400 - 両方のspeedを設定できます。参照：jQuery.animate
speed1 Number default: 400 - 必要なら個別に設定します。
speed2 Number default: 400 - 必要なら個別に設定します。
easing String default: 'swing' - 両方のeasingタイプを設定します。参照：jQuery.animate
easing1 String default: 'swing' - 必要なら個別にeasingタイプを設定します。
easing2 String default: 'swing' - 必要なら個別にeasingタイプを設定します。
zIndex Number default: 100 - 両方のアニメーション中のz-indexを指定します。
zIndex1 Number default: 100 - 必要なら個別に設定します。
zIndex2 Number default: 100 - 必要なら個別に設定します。
dock_auto Boolean default true - trueにするとスワップされた親要素にドックされます。
falseにすれば、DOMは変更しません。
before_dock function(elem1, elem2) default: undefined - ドック前のイベントを取得できます。
done function(elem1, elem2) default: undefined - ドック後のイベントを取得できます。
from_position Object:{left, top} default: elem1.offset() - element2の移動先位置を設定します。
to_position Object:{left, top} default: elem2.offset() - element1の移動先位置を設定します。

サンプル

<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="jquery.swapAnimate.js"></script>

<script>

$(function(){

    $("#swap").on('click', function(){
        $(".A").swapAnimate($(".B"));
    });

});

</script>
</head>

<body>
<button id="swap">swap A and B</button>
<hr>
<div class="box A">A</div>
<div class="box B">B</div>
</body>
</html>

ドラッグ&ドロップサンプル - Plunker

<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="jquery.swapAnimate.js"></script>

<script>

var original_pos = {};

$(function(){

    $("#swap").on('click', function(){
        $(".A").swapAnimate($(".B"));
    });
    $("#swap2").on('click', function(){
        $(".B").swapAnimate($(".C"));
    });
    $("#swap3").on('click', function(){
        $(".C").swapAnimate($(".A"));
    });

    $(".box").draggable({
        zIndex: 100,
        start: function(e){
            original_pos = $(this).offset(); // Store Original Position
        }
    });
    $(".FLAME").droppable({
        drop: function(e){
            $(e.toElement).swapAnimate(
                $(e.target).find(".box"),
                {
                    from_position: original_pos, // $(e.target).find(".box") will move this Position
                    speed1: 100,
                    easing2: "easeOutBack"
                }
            );
        },
        deactivate: function(e){
            $(e.toElement).css({left: 0, top: 0});
        },
        hoverClass: "hover"
    });

});

</script>

</head>

<body>
<div>
<button id="swap">swap A and B</button>
<button id="swap2">swap B and C</button>
<button id="swap3">swap C and A</button>
</div>
<hr>
<div class="box A">A</div>
<div class="FLAME2">
<div class="FLAME">Droppable
    <div class="box B">B</div>
</div>
<div class="box C">C</div>
</div>

</body>

</html>

jquery.swapAnimate.js アニメーションを付けてお互いの位置を入れ替え

jquery.swapAnimate.js