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.

by TJ VanToll

HTML

<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"></div>
</div>

CSS

.snappable, .draggable {
    width: 75px;
    height: 75px;
}
.snappable {
    margin: 0 50px;
    float: left;
    background: green;
}
.draggable {
    /* Umcomment and drag from left to right to see http://bugs.jqueryui.com/ticket/9724 */
    /* margin-left: 50px; */
    background: red;
    position: absolute;
    left: 0;
}

JavaScript

$(".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);
    }
});