Question

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

我看到AngularJS有ng-dragstart事件（http://docs.ng.dart.ant.c-k.me/angular.directive/NgEventDirective.html），但它似乎不起作用。在其他页面上，我可以看到其他开发人员建议执行新的指令＆＃39;。

所以我的问题是：＆＃34;是否在AngularJS中实现了本地ng-drag功能，还是我自己应该实现？＆＃34;

Answer 1

如果您不想使用已经制作过的，您需要自己实施。我自己把一些东西扔了。

我需要的是在角度上下文中使用拖动事件的简单方法。我想要与其他ng-events完全相同的功能，只需要拖动事件。我查看了源here，并且大部分都复制了源如何创建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);
}());

Answer 2

您可以通过codef0rmer对AngularJS使用Angular Drag and Drop。它非常容易实现，并且支持对拖放中引发的事件进行angular和jquery回调

在您的情况下，对于拖动功能，您可以将其写为

<div class="btn btn-primary" data-drag="true" data-jqyoui-options="{revert: 'invalid'}" ng-model="list1" jqyoui-draggable="{animate:true}" ng-hide="!list1.title">{{list1.title}}</div>

我个人使用它并发现它很容易。

更多详情Here

AngularJS ng-drag

2 个答案: