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: /

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;
        });
    }
});

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/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;
        });
    }
});

• javascript
• jquery
• html
• css

• 1 Does this help jqueryui./sortable? – Nickydonna Commented Aug 19, 2014 at 15:41
• 1 No, thanks I don't want to use jQueriUI. – M1X Commented Aug 19, 2014 at 16:05

3 Answers 3

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/exc5m046/3/

Edit, updated

Try

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/exc5m046/14/

See http://api.jquery./prependTo/

Try

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

This triggers your code only, if the div is not the first element in the parent #container.