confirmit card sort

Place this script inside question text of a confirmit grid question.

by trivender

HTML

<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

CSS

.confirmit-grid {
    display: none;
}
#dragdropapp {
    position: relative;
}
#draggable-wrapper, #droppable-wrapper {
    clear: both;
    height: 120px;
}
#draggable-wrapper {
    margin-bottom: 15%;
}
.draggable-box, .droppable-box {
    float: left;
    margin-left: 5px;
    border: 1px solid;
    width: 15%;
    text-align: center;
}
.draggable-box {
    height: 75%;
}
.droppable-box {
    height: 100%;
}
.draggable.card {
    background-color: gray;
    border-radius: 10px;
    position: absolute;
    border: 1px solid;
    box-shadow: 3px 3px 5px #888888;
}
.droppable-text {
    font-weight: bold;
    border-bottom: 1px solid;
    background-color: gainsboro;
    height: 20%;
}
.droppable.deck {
    height: 80%;
}
.target-hover {
    background:#C9C9C9;
}

JavaScript

$(function () {
    var $thisQuestion = $('.question:eq(0)');
    var $fieldSet = $('.confirmit-grid', $thisQuestion).parent();
    $fieldSet.before('<div id = "dragdropapp"><div id = "draggable-wrapper"></div><div id = "droppable-wrapper"></div></div>');
    var $tbodyth = $('.confirmit-grid tbody > tr > th', $fieldSet);

    //creating containers
    $tbodyth.each(function (index) {
        $('#draggable-wrapper').append('<div id = "draggable-box-' + (index + 1) + '" class = "draggable-box"></div>');
    });

    $('.confirmit-grid thead > tr > th:not(:first)', $fieldSet).each(function (index) {
        var i = index + 1;
        $('#droppable-wrapper').append('<div class = "droppable-box"><div class = "droppable-text">' + $(this).text() + '</div><div id = "droppable-deck-' + i + '" class = "droppable deck" data-col = "' + i + '"></div></div>');
    });

    //creating cards
    $tbodyth.each(function (index) {
        var i = index + 1;
        var $elm = $('#draggable-box-' + i + '').append('<div class = "draggable card" id = "draggable-card-' + i + '">' + $(this).text() + '</div>');
        var p = $elm.position(),
            ml = parseInt($elm.css('margin-left'), 10),
            bl = parseInt($elm.css('border-left'), 10),
            offsetleft = ml + bl,
            width = $elm.width(),
            height = $elm.innerHeight(),
            shiftleft = width * 0.02,
            shiftTop = height * 0.02,
            cssObj = {};
        console.log('width:' + width + '');
        console.log('shiftleft:' + shiftleft + '');
        cssObj['z-index'] = 10;
        cssObj.left = p.left + offsetleft + shiftleft;
        cssObj.top = p.top + bl + shiftTop;
        cssObj.height = height - (shiftTop * 4);
        cssObj.width = width - (shiftleft * 4);
        $('#draggable-card-' + i + '').css(cssObj);
    });




    // Make the "cards" draggable
    $('.draggable').draggable({
        revert: "invalid"
    });
    $('.droppable').droppable({
       ...