jQuery & jQueryUI Base

by Larry Cole

HTML

<link rel="stylesheet" href="http://ajax.microsoft.com/ajax/jquery.ui/1.8.7/themes/black-tie/jquery-ui.css">
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js"></script>
<div id="snap-one" class="snap snapOne"></div>
<div id="snap-two" class="snap snapTwo"></div>

<div class="demo">
    <br clear="both" />
    
    <div id="draggable" class="draggable ui-widget-content">
        <p>Oh Snap!</p>
    </div>
    <div id="results"></div>
</div>

CSS

.snapOne {
    position:absolute;
    width:1px; height:500px; background-color:#ccc;
    top:0px; left:200px;
}

.snapTwo {
    position:absolute;
    width:1px; height:500px; background-color:#ccc;
    top:0px; left:400px;
}

.draggable { 
    width: 199px; 
    height: 80px; 
    margin: 0 0 0 0; 
    font-size: .9em; 
}

JavaScript

$(".draggable").draggable({
    snap: ".snap",
    //drag: function(event, ui) {
    //    $(this).data('draggable').offset.click.top += 1;
    //},
    stop: function(event, ui) { 
        /* Get the possible snap targets: */
        var snapped = $(this).data('draggable').snapElements;
       
        /* Pull out only the snap targets that are "snapping": */
        var snappedTo = $.map(snapped, function(element) {
            return element.snapping ? element.item : null;
        });
       
        /* Display the results: */
        var result= '';
        $.each(snappedTo, function(idx, item) {
            result += $(item).text() + ", ";
        });
        
        $("#results").html("Snapped to: " + (result === '' ? "Nothing!" : result));
    }
});