Up/Down Elements

Moving elements up and down on the page

by Lance Larsen

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<div class="row">
    <div class="col-sm-12 updownrow" style="background: lightblue;">
        <button type="button" class="updownbtn movetop fa fa-angle-double-up"></button>
        <button type="button" class="updownbtn moveup fa fa-angle-up"></button>
        <button type="button" class="updownbtn movedown fa fa-angle-down"></button>
        <button type="button" class="updownbtn movebottom fa fa-angle-double-down"></button>
        Row 1
    </div>
    <div class="col-sm-12 updownrow" style="background: lightgreen;">
        <button type="button" class="updownbtn movetop fa fa-angle-double-up"></button>
        <button type="button" class="updownbtn moveup fa fa-angle-up"></button>
        <button type="button" class="updownbtn movedown fa fa-angle-down"></button>
        <button type="button" class="updownbtn movebottom fa fa-angle-double-down"></button>
        Row 2
    </div>
    <div class="col-sm-12 updownrow" style="background: lightpink;">
        <button type="button" class="updownbtn movetop fa fa-angle-double-up"></button>
        <button type="button" class="updownbtn moveup fa fa-angle-up"></button>
        <button type="button" class="updownbtn movedown fa fa-angle-down"></button>
        <button type="button" class="updownbtn movebottom fa fa-angle-double-down"></button>
        Row 3
    </div>
    <div class="col-sm-12 updownrow" style="background: lightseagreen;">
        <button type="button" class="updownbtn movetop fa fa-angle-double-up"></button>
        <button type="button" class="updownbtn moveup fa fa-angle-up"></button>
        <button type="button" class="updownbtn movedown fa fa-angle-down"></button>
        <button type="button" class="updownbtn movebottom fa fa-angle-double-down"></button>
        Row 4
    </div>
</div>

CSS

.updownrow {
    padding: 15px;
}

.updownbtn {
    font-size: 25px;
}

JavaScript

$(".moveup").on("click", function() {
    var elem = $(this).closest("div");
    elem.prev().before(elem);
});

$(".movedown").on("click", function() {
    var elem = $(this).closest("div");
    elem.next().after(elem);
});

$(".movetop").on("click", function() {
    var elem = $(this).closest("div");
    elem.siblings().first().before(elem);
});

$(".movebottom").on("click", function() {
    var elem = $(this).closest("div");
    elem.siblings().last().after(elem);
});