AngularJS ng-drag

Osk*_*ura 8 drag-and-drop angularjs angularjs-directive

我是AngularJS的新手,我对当前项目有点压力,这就是我在这里问的原因.

我看到AngularJS有ng-dragstart事件(http://docs.ng.dart.ant.ck.me/angular.directive/NgEventDirective.html),但它似乎不起作用.在其他页面上,我可以看到其他开发人员建议做新的"指令".

所以我的问题是:"在AngularJS中是否实现了本机ng-drag功能,还是我自己应该实现?"

jer*_*emy 9

如果您不想使用已经制作的产品,则需要自己实施.我自己把东西扔了.

我需要的是一种在角度上下文中使用拖动事件的简单方法.我想要与其他ng-events完全相同的功能,只需要拖动事件.我在这里查看了源代码,并且大部分都复制了源代码如何创建ng-event指令.

包含ngDrag为依赖项.您可以使用所有ng-drag*活动.

(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);
}());
Run Code Online (Sandbox Code Playgroud)