<div draggable="true" dir1>Blah</div>
<div class="drop" dir2></div>

app.directive('dir1', function() {
    return function(scope, element, attr) {
        element.bind('dragstart', function(event) {
            event.dataTransfer.effectAllowed = 'move';
            event.dataTransfer.setData('Text', scope.someData);
            event.preventDefault(); // this is to prevent the ghost image
        }
        // My snapping calculation and rendering is done here
    }
}
app.directive('dir2', function() {
    return function(scope, element, attr) {
        element.bind('drop', function(event) {
            event.dataTransfer.effectAllowed = 'move';
            var data = event.dataTransfer.getData('Text');
            event.preventDefault(); // this is to prevent the ghost image
        }
    }
}