用动画替换div位置

Question

如何在单击时仅与堆栈中的第一个div交换div位置。所以当div 2或3被点击时它会和的第一个子元素交换当在DOM中单击parent的第一个子元素时，应该不会发生任何事情。

这是我的小提琴: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;
        });
    }
});

Answer 1

edit:

要将单击的div 仅与第一个元素交换，您必须更改脚本。prevDiv变量在应用开关时选择前面的选项，但是您希望将其更改为:

prevDiv = $("#container > :first-child")

所以它总是选择容器的第一个子元素

然后，添加被单击的元素不能是第一个元素的条件:

if (!clickedDiv.is(":first-child")) {

最后，为了正确交换，将prevDiv放置在单击div的位置，并将clickedDiv设置为prependTo(''):

的第一个子节点。

prevDiv.insertBefore(clickedDiv);
clickedDiv.prependTo("#container");

, ,你是好去:http://jsfiddle.net/exc5m046/3/

Answer 2

编辑，更新

试html

<!-- removed class `first` from element at index 0 -->
<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>

js

var animating = false;
$('#container').on('click', '.move', function () {
    var clickedDiv = $(this).closest('div'),
        // adjusted `prevDiv` to `$(".move").eq(0)`
        prevDiv = $(".move").eq(0),
        distance = clickedDiv.offset().left - prevDiv.offset().left;
    if (/*!clickedDiv.is(".first") &&*/ 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');
            // changed `clickedDiv.insertBefore(prevDiv);` to 
            // `clickedDiv.prependTo("#container");`
            clickedDiv.prependTo("#container");
            animating = false;
        });
    }
});

http://jsfiddle.net/exc5m046/14/

见http://api.jquery.com/prependTo/

Answer 3

Try

$('#container div').on('click', '.move', function () {
  if ( $( this ).index() == 0 ) {
    return
  } else {
    //...code
  }
}

如果div不是父元素#container的第一个元素，这只会触发你的代码。