app.directive('draggable', function() {
    return function(scope, element) {
        var el = element[0];

        el.draggable = true;

        el.addEventListener(
            'dragstart',
            function(e) {
                e.dataTransfer.effectAllowed = 'move';
                e.dataTransfer.setData('Text', JSON.stringify(scope.user));
                this.classList.add('drag');

                return false;
            },
            false
        );

        el.addEventListener(
            'dragend',
            function(e) {
                this.classList.remove('drag');
                return false;
            },
            false
        );
    }
 });

 app.directive('droppable', function() {
    return function(scope, element) {
        var el = element[0];

        el.addEventListener(
            'dragover',
            function(e) {
                e.dataTransfer.dropEffect = 'move';

                if(e.preventDefault) e.preventDefault();
                this.classList.add('over');

                return false;
            },
            false
        );

        el.addEventListener(
            'dragenter',
            function(e) {
                this.classList.add('over');
                return false;
            },
            false
        );

        el.addEventListener(
            'dragleave',
            function(e) {
                this.classList.remove('over');
                return false;
            },
            false
        );

        el.addEventListener(
            'drop',
            function(e) {
                if(e.preventDefault) e.preventDefault();
                if(e.stopPropagation) e.stopPropagation();

                this.classList.remove('over');

                userObj = JSON.parse(e.dataTransfer.getData('Text'));
                scope.team.addMember(userObj);
                scope.$apply();
            },
            false
        );
    }
 });