Kenny Kenny - 3 months ago 10
jQuery Question

JQuery - Move Divs/Rows

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

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