swapping

by Mayank Dixit

HTML

<div class="container">
    <div class="box" id="swap1">
        <label>One</label>
    </div>
    <div class="box" id="swap2">
        <label>Two</label>
    </div>
    <div class="box" id="swap3">
        <label>Three</label>
    </div>
    <div class="box" id="swap4">
        <label>Four</label>
    </div>
</div>

CSS

.container {
    background: lightgray;
    border: 1px solid black;
    padding: 5px;
    float: left;
    clear: left;
    color: white;
}
.box {
    width: 70px;
    height: 50px;
    background: gray;
    border: 1px solid #e2e2e2;
    float: left;
    padding: 5px;
    cursor: pointer;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.box:nth-child(1) {
    background: green;
}
.box:nth-child(2) {
    background: red;
}
.box:nth-child(3) {
    background: black;
}
.box:nth-child(4) {
    background: yellow;
    color: black;
}
.box:nth-child(5) {
    background: pink;
    color: black;
}

JavaScript

var from, to;
$(".box").click(function (evt) {
    console.log(evt);
    if ( !! from) {
        to = evt.currentTarget;
        swap(from, to);
    } else {
        from = evt.currentTarget;
        console.log(from, to);
    }
});

function swap(f, t) {
    console.log(f, t);
    $(f).before(t);
    from = undefined;
    to = undefined;
}