用动画交换div位置 [英] Swap div position with animation

问题描述

如何在点击时仅使用堆叠中的第一个div 来切换div位置。因此，当点击div 2或3时，它将与DOM中的
parent的第一个子元素交换，当DOM中父元素的第一个子元素被点击时，不会发生任何事情。

这是我的小提琴： http://jsfiddle.net/exc5m046/

HTML

 < div id =container> 
< div id =oneclass =move> div 1< / div> 
< div id =twoclass =move> div 2< / div> 
< div id =threeclass =move> div 3< / div> 
< / div> 
  

CSS

  #container {
 width：200px; 
 color：#fff; 
 position：relative; 
 text-align：center; 
} 
 #container div {
 position：relative; 
 margin：10px; 
 background：＃ff00ab; 
 padding：5px; 
 border-radius：3px; 
 text-align：center; 
 display：inline-block; 
} 
  

jQuery

  var animating = false; 
 
 $（'＃container'）。on（'click'，'.move'，function（）{
 
 var clickedDiv = $（this）.closest div'），
 
 prevDiv = clickedDiv.prev（），
 distance = clickedDiv.offset（）。left  -  prevDiv.offset（）。left; 
 
 if（prevDiv.length）{
 animating = true; 
 $ .when（clickedDiv.animate（{
 left：-distance 
}，2000），
 prevDiv .animate（{
 left：distance 
}，2000））。done（function（）{
 prevDiv.css（'left'，'0px'）; 
 clickedDiv。 css（'left'，'0px'）; 
 clickedDiv.insertBefore（prevDiv）; 
 animating = false; 
}）; 
} 
  
 
 
 
}）; 
解决方案
 b> EDITTED： 
 
 
 
要仅使用第一个元素交换点击的div ，必须更改脚本。  prevDiv 变量正在选择上一个同级，应用开关，但您要将其更改为：
  prevDiv = $（＃container>：first-child）
  
因此它总是选择容器的第一个子项。
 
 
 
 
 
然后，添加clicked元素不能是第一个的条件：
  if（！clickedDiv.is（：first-child））{
  
 
 
最后，要正确交换，请将 prevDiv  ，并将 clickedDiv 设置为 prependTo（''）的第一个孩子。 ：
  prevDiv.insertBefore（clickedDiv）; 
 clickedDiv.prependTo（＃container）; 
  
现在现在 =http://jsfiddle.net/exc5m046/3/ =nofollow> http://jsfiddle.net/exc5m046/3/  
 
How to swap div position when clicked only with the first div in stack. So when div 2 or 3 is clicked it will swap with the first child of 
parent in DOM and when the first child of parent in DOM is clicked nothing should happen.

This is my fiddle: http://jsfiddle.net/exc5m046/

HTML
<div id="container">
    <div id="one" class="move">div 1</div>
    <div id="two" class="move">div 2</div>
    <div id="three" class="move">div 3</div>
</div>
CSS
#container {
    width: 200px;
    color:#fff;
    position: relative;
    text-align:center;
}
#container div {
    position: relative;
    margin:10px;
    background:#ff00ab;
    padding:5px;
    border-radius:3px;
    text-align:center;
    display:inline-block;
}
jQuery
var animating = false;

$('#container').on('click', '.move', function () {

var clickedDiv = $(this).closest('div'),

    prevDiv = clickedDiv.prev(),
    distance = clickedDiv.offset().left - prevDiv.offset().left;

if (prevDiv.length) {
    animating = true;
    $.when(clickedDiv.animate({
       left: -distance
    }, 2000),
    prevDiv.animate({
        left: distance
    }, 2000)).done(function () {
        prevDiv.css('left', '0px');
        clickedDiv.css('left', '0px');
        clickedDiv.insertBefore(prevDiv);
        animating = false;
    });
}
});
解决方案
EDITTED:

To swap the clicked div only with the first element, you have to change the script. The prevDiv variable is selecting the previous sibiling the apply the switch, but you want to change it to:
prevDiv = $("#container > :first-child")
so it always selects the first child of the container.



Then, add the condition that the clicked element cannot be the first one:
if (!clickedDiv.is(":first-child")) {


Finally, to swap correctly, place the prevDiv at the place where the clicked div was, and set the clickedDiv to be the first child with prependTo(''):
prevDiv.insertBefore(clickedDiv);
clickedDiv.prependTo("#container");
And, now, you're good to go: http://jsfiddle.net/exc5m046/3/

                        
这篇关于用动画交换div位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！