用動畫交換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

編輯：

要僅將單擊的div 與第一個元素交換，您必須更改腳本。 prevDiv變量正在選擇上一個應用開關的功能，但是您想要將其更改為：

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

因此它總是選擇容器的第一個孩子。

然后，添加條件，即clicked元素不能是第一個元素：

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

最后，要正確交換，請將prevDiv放置在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的第一個元素時 ，這才觸發您的代碼。