Edited at

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

More than 1 year has passed since last update.

test.gif


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>