jQuery UI draggable - if element dragged

by devangkantharia

HTML

<div id="container">
    <div id="Six1" class="Six"></div>
    <div id="Six2" class="Six"></div>
    <div id="Six3" class="Six"></div>
    <div id="BigSix"></div>
</div>

CSS

div#Wrapper {
     width: 980px;
     height: 500px;
     margin: auto;
 }
 #Six {
     width: auto;
     height: auto;
 }
 .Six {
     width: 100px;
     height: 100px;
     border-radius: 50%;
     border: 2px dashed black;
     margin-right: 10px;
     cursor: move;
     z-index: 99;
     box-sizing:border-box;
 }
 #Six1 {
     background: red;
     top: 0;
     left: 0;
 }
 #Six2 {
     background: blue;
 }
 #Six3 {
     background: orange;
 }
 #BigSix {
     width: 300px;
     height: 300px;
     border-radius: 50%;
     border: 2px dashed black;
     margin-right: 10px;
     position:relative;
 }
 .drop-hover {
     background-color: grey;
 }
 #BigSix div.Six {
     position: absolute !important;
     top:0 !important;
     left:0 !important;
     width: 100%;
     height: 100%;
     border: none;
 }

JavaScript

var draggable = $('.Six');
var droppable = $('#BigSix');

$('#BigSix').droppable({
    hoverClass: 'drop-hover',
    drop: function (event, ui) {
        var _this = $(this);
        ui.draggable.addClass('dropped')
            .data('droppedin', _this)
            .data('SixIndex', ui.draggable.index());
        _this.droppable('disable')
            .append(ui.draggable)
    }
});

$('.Six').draggable({
    revert: function (event, ui) {
        $(this).data("draggable").originalPosition = {
            top: 0,
            left: 0
        };
        return !event;
    },
    drag: function (event, ui) {
        if ($(this).data('droppedin')) {
            $(this)
                .data('droppedin').droppable('enable')
                .data('droppedin', null)
                .removeClass('dropped');
            var prevElemIndex = $(this).data('SixIndex') - 1;
            if (prevElemIndex == -1) {
                $("#container").prepend($(this))
            } else {
                $(".Six:eq(" + prevElemIndex + ")").after($(this))
            }
        }
    }
});