用动画交换div位置

Question

如果仅使用堆栈中的第一个div 单击，如何交换div位置。因此，当点击div 2或3时，它将与第一个孩子交换 DOM中的父级，当点击DOM中父级的第一个子级时，不会发生任何事情。

这是我的小提琴：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

EDITTED：

要将单击的div 仅与第一个元素交换，您必须更改脚本。 prevDiv变量正在选择应用交换机的先前sibiling，但是您想将其更改为：

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

尝试

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

如果div不是父#container中的first element，则会触发您的代码。