JQuery UI X- Axis Draggable + Snappable Test

This purpose of this test is to show the current inconsistent results for using jquery UI x-axis draggable and snappable options together. Open up your Console log to see the objects/elements that are "snapped" as you drag the red square around.

HTML

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<div id="container">
    <div id="snap-1" class="snappable">Snappable #1</div>
    <div id="snap-2" class="snappable">Snappable #2</div>
    <div id="snap-3" class="snappable">Snappable #3</div>
    <div id="drag-1" class="draggable">Draggable</div>
</div>

CSS

#container > div {
    width: 75px;
    height: 75px;
    margin: 0 50px;
    font-size: 12px;
}
.snappable {
    float: left;
    background: green;
}
.draggable {
    position: absolute;
    left: 25px;
    background: red;
}

JavaScript

$(document).ready(function () {
    $(".draggable").draggable({
        axis: "x",
        snap: ".snappable",
        snapMode: "inner",
        /* Code below from - http://stackoverflow.com/questions/5177867/how-to-find-out-about-the-snapped-to-element-for-jquery-ui-draggable-elements */
        stop: function (event, ui) {
            /* Get the possible snap targets: */
            var snapped = $(this).data('ui-draggable').snapElements;

            /* Pull out only the snap targets that are "snapping": */
            var snappedTo = $.map(snapped, function (element) {
                return element.snapping ? element : null;
            });

            console.log(snappedTo);

        }
    });
});