Create an array based on the order of dropped elements

Create an array based on the order of dropped elements

by Akram kamal

HTML

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<section>

    <div id="a1" class="answerCard noselect">1</div>
    <div id="a2" class="answerCard noselect">2</div>
    <div id="a3" class="answerCard noselect">3</div>

    <div id="container">
        <div class="drop dropLeft"></div>
        <div class="drop dropLeft"></div>
        <div class="drop dropLeft"></div>
    </div>

    <!--   <button id="checkAnswers">Check Answers</button> -->

</section>

CSS

body {
    position: relative;
    font-family: sans-serif;
}

.noselect {
    -webkit-touch-callout: none;
    /* iOS Safari */
    -webkit-user-select: none;
    /* Chrome/Safari/Opera */
    -khtml-user-select: none;
    /* Konqueror */
    -moz-user-select: none;
    /* Firefox */
    -ms-user-select: none;
    /* IE/Edge */
    user-select: none;
    /* non-prefixed version, currently not supported by any browser */
}

.drop .answerCard {
    top: 0;
    left: 0;
    box-shadow: none;
}

.ui-draggable-dragging.answerCard {
    box-shadow: 10px 10px 25px #888888;
    z-index: 2;
}

.answerCard {
    position: relative;
    top: 0px;
    left: 20px;
    width: 150px;
    height: 150px;
    font-size: 120px;
    font-weight: 700;
    color: #fff;
    text-align: center;
    background-color: red;
    line-height: 150px;
    cursor: pointer;
    display: inline-block;
    box-shadow: 10px 10px 25px #888888;
    z-index: 2;
}


/* DropZone */

#container {
    position: fixed;
    top: 200px;
    left: 200px;
    width: 490px;
    height: 150px;
    display: flex;
    justify-content: space-between;
}

.dropLeft {
    width: 150px;
    height: 150px;
    background-color: #a1ed12;
    line-height: 150px;
}

JavaScript

// Draggable Answer Cards   

$('.answerCard').draggable({
    stack: '.answerCard',
    start: function(event, ui) {
        $(this).removeClass("dropped")

    },
    stop: function(event, ui) {
        console.log(this)
        if (!$(this).is(".dropped")) $(this).removeAttr("style").addClass("dropped").appendTo("section")
    }

});

// Drop Zones

$('.drop').droppable({
    drop: function(event, ui) {
        $(ui.draggable).removeAttr("style").addClass("dropped").appendTo(this)
        console.log(order())

    }
});

function order() {
    return $(".drop>.answerCard").map(function() {
        return this.id
    }).get()
}