Implementing a 'snapped' event for 'draggable' widgets

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/ui-lightness/jquery-ui.css">
<div class="drag ui-state-default">Drag Me</div>

<div class="container">
    <div class="grid ui-state-highlight">Grid Item 1</div>
    <div class="grid ui-state-highlight">Grid Item 2</div>
    <div class="grid ui-state-highlight">Grid Item 3</div>
    <div class="grid ui-state-highlight">Grid Item 4</div>
</div>

CSS

body {
    font-family: Verdana, Arial, sans-serif;
    font-size: 12px;
}

.drag {
    margin: 10px;
    padding: 5px;
    width: 150px;
}

.container {
    width: 370px;
}

.grid {
    float: left;
    margin: 10px;
    padding: 5px;
    width: 150px;
    height: 150px;
}

JavaScript

$(document).ready(function() {
    $(".drag").draggable({
        drag: function(event, ui) {
            var draggable = $(this).data("draggable");
            $.each(draggable.snapElements, function(index, element) {
                ui = $.extend({}, ui, {
                    snapElement: $(element.item),
                    snapping: element.snapping
                });
                if (element.snapping) {
                    if (!element.snappingKnown) {
                        element.snappingKnown = true;
                        draggable._trigger("snapped", event, ui);
                    }
                } else if (element.snappingKnown) {
                    element.snappingKnown = false;
                    draggable._trigger("snapped", event, ui);
                }
            });
        },
        snap: ".grid",
        snapped: function(event, ui) {
            ui.snapElement.toggleClass("ui-state-highlight ui-state-default");
             
        }
    });
});