simple drag events as angular directives

angular-drag-events.js

var directives = ['drag', 'dragstart', 'dragend', 'dragover', 'dragenter', 'drop'];

// The HTML5 drag and drop api is the most stupid thing 
// I've ever seen, but I'm going to use it anyway.

angular.forEach(directives, function(dir){
    app.directive(dir, [function () {
        return {
            restrict: "A",
            scope: false,
            link: function ($scope, $elem, $attr) {
                $elem.attr('draggable', 'true');
                // Cancel dragover events so we can listen to drop
                if(dir === 'drop'){
                    $elem.on('dragover', function(){
                        event.preventDefault();
                    });
                }
                $elem.on(dir, function(e){
                    // The expression inside i.e. drag="{{angukar-expression}}" 
                    // gets executed with the this context {event: e, target: this}
                    // so that you could for example pass arguments to another function 
                    // bound to the scope like this drag="move(event, target)"
                    $scope.$eval($attr[dir], {event: e, target: this});
                });
            }
        };
    }]);
});