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;">
        <div class="col-sm-12">
            <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>
        </div>
        <div class="col-sm-12">
            Row 1
        </div>
    </div>
    <div class="col-sm-12 updownrow" style="background: lightgreen;">
        <div class="col-sm-12">
            <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>
        </div>
        <div class="col-sm-12">
            Row 2
        </div>
    </div>
    <div class="col-sm-12 updownrow" style="background: lightpink;">
        <div class="col-sm-12">
            <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>
        </div>
        <div class="col-sm-12">
            Row 3
        </div>
    </div>
    <div class="col-sm-12 updownrow" style="background: lightseagreen;">
        <div class="col-sm-12">
            <button type="button" class="updownbtn movetop fa fa-angle-double-up"></button>
            <button...

CSS

.updownrow {
    padding: 15px;
}

.updownbtn {
    font-size: 25px;
}

JavaScript

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

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

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

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