AngularJS ng-glisser

Vous aurez besoin de mettre en œuvre vous-même si vous ne voulez pas en utiliser une déjà faite. J'ai jeté quelque chose de moi-même.

Ce que j'avais besoin d'un moyen simple d'utiliser les événements de glisser à l'intérieur d'un angulaires contexte. Je voulais exactement les mêmes fonctionnalités dans un autre ng-les événements ont, juste avec les événements de glisser aussi. J'ai regardé la source ici et pour la plus grande partie copié comment la source crée la ng-événement directives.

Inclure ngDrag comme une dépendance. Vous pouvez utiliser tous les ng-drag* événements.

(function(){
    var ngDragEventDirectives = {};

    angular.forEach(
        'drag dragend dragenter dragexit dragleave dragover dragstart drop'.split(' '),
        function(eventName) {
            var directiveName = 'ng' + eventName.charAt(0).toUpperCase() + eventName.slice(1);

            ngDragEventDirectives[directiveName] = ['$parse', '$rootScope', function($parse, $rootScope) {
                return {
                    restrict: 'A',
                    compile: function($element, attr) {
                        var fn = $parse(attr[directiveName], null, true);

                        return function ngDragEventHandler(scope, element) {
                            element.on(eventName, function(event) {
                                var callback = function() {
                                    fn(scope, {$event: event});
                                };

                                scope.$apply(callback);
                            });
                        };
                    }
                };
            }];
        }
    );

    angular
        .module('ngDrag', [])
        .directive(ngDragEventDirectives);
}());

OriginalL'auteur jeremy