JQuery - Move Divs/Rows

Question

I have a set of rows and I'm trying to do an onclick to select the row, then move it before or after it's sibling row.

I'm trying to use a series of insertBefore() , insertAfter() , prev() , and next() for selecting and moving elements. I'm not sure if these are good methods to use or if they're reaching their deprecation time or whatnot.

The code is below:

HTML

<div>
    <div class="row">
        <div class="small-10 medium-3 large-3 columns"><input type="text" placeholder="Presenter Name"></div>
        <div class="small-4 medium-1 large-1 text-center columns"></div>
        <div class="small-4 medium-1 large-1 text-center columns"></div>
        <div class="small-4 medium-1 large-1 text-center columns"></div>
        <div class="small-12 medium-5 large-5 columns"></div>
        <div class="show-for-medium-up medium-1 large-1 columns">
        <div class="row">
            <div class="small-6 columns close-thik"></div>
            <div class="small-6 columns arrow">  
                <div class="arrow-up"></div>
                <div class="arrow-down"></div>
            </div>
        </div>
        </div>
    </div>
    <div class="row">
        <div class="small-10 medium-3 large-3 columns"><input type="text" placeholder="Presenter Name"></div>
        <div class="small-4 medium-1 large-1 text-center columns"></div>
        <div class="small-4 medium-1 large-1 text-center columns"></div>
        <div class="small-4 medium-1 large-1 text-center columns"></div>
        <div class="small-12 medium-5 large-5 columns"></div>
        <div class="show-for-medium-up medium-1 large-1 columns">
        <div class="row">
            <div class="small-6 columns close-thik"></div>
            <div class="small-6 columns arrow">  
                <div class="arrow-up"></div>
                <div class="arrow-down"></div>
            </div>
        </div>
        </div>
    </div>
    <div class="row">
        <div class="small-10 medium-3 large-3 columns"><input type="text" placeholder="Presenter Name"></div>
        <div class="small-4 medium-1 large-1 text-center columns"></div>
        <div class="small-4 medium-1 large-1 text-center columns"></div>
        <div class="small-4 medium-1 large-1 text-center columns"></div>
        <div class="small-12 medium-5 large-5 columns"></div>
        <div class="show-for-medium-up medium-1 large-1 columns">
        <div class="row">
            <div class="small-6 columns close-thik"></div>
            <div class="small-6 columns arrow">  
                <div class="arrow-up"></div>
                <div class="arrow-down"></div>
            </div>
        </div>
        </div>
    </div>
</div>

As you can see, there's a <div> with class arrow and two divs inside there that are the up and down arrow (for moving).

JavaScript

var MovePerson = {

    up: function() {

        $(document).on("click", ".arrow-up", function() {

            $(this).parents().eq(3).insertBefore($(this).prev());

        });

    }, 

    down: function() {

        $(document).on("click", ".arrow-down", function() {

            $(this).parents().eq(3).insertAfter($(this).next());

        });

    }

};

$(document).ready(MovePerson.up);
$(document).ready(MovePerson.down);

So if you can imagine, I have rows

A
B
C
D

And I want to move C to the second row, so order would then be A, C, B, D .

So my logic is to use $(this).parents().eq(3) to go to and select the <row> then use some more js to move it before or after the element .

(Bonus) It would be nice to know if I've reached the end or beginning. So perhaps some way of detecting if there's another sibling after or before my target.

Answer 1

i think the idea is just to simply to select current row, identify the prev/next row, detach the current row and either slot it before previous row or after next row.

Here is a quick mode to your code snippet.

var MovePerson = {

    up: function() {

        $(document).on("click", ".arrow-up", function() {

            var thisRow = $(this).parents().eq(3);
            var prevRow = $(thisRow).prev();

            //we only want to move this row up if there is a row before this row.
            if(prevRow){
                $(prevRow).before($(thisRow).detach());
            }
        });

    }, 

    down: function() {

        $(document).on("click", ".arrow-down", function() {

            var thisRow = $(this).parents().eq(3);
            var nextRow = $(thisRow).next();

            //we only want to move this row down if there is a row after this row.
            if(nextRow){
                $(nextRow).after($(thisRow).detach());
            }
        });

    }

};

$(document).ready(MovePerson.up);
$(document).ready(MovePerson.down);