jQuery & jQueryUI Base

by Riccal

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 ui-widget-header">Snap 1</div>
<div id="snap-two" class="snap ui-widget-header">Snap 2</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

.draggable { 
    width: 90px; 
    height: 80px; 
    padding: 5px; 
    float: left; 
    margin: 0 10px 10px 0; 
    font-size: .9em; 
}

.snap { 
    width: 300px; 
    height: 100px; 
    margin-bottom: 25px;
}

JavaScript

$(".draggable").draggable({
    snap: ".snap",
    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));
    }
});