AngularJS ng-drag

Question

I'm new to AngularJS and I have a bit pressure on the current project that's why I'm asking here.

I see that AngularJS has ng-dragstart event (http://docs.ng.dart.ant.c-k.me/angular.directive/NgEventDirective.html) but it doesn't seem to work. On other pages I can see that other developers recommend to do new 'directives'.

So my question is: "Is there a native ng-drag functinallity implemented within AngularJS or should I implementi by myself?"

Answer 1

You'll need to implement it yourself if you don't want to use an already-made one. I threw together something myself.

What I needed was a simple way to use the drag events within an angular context. I wanted the exact same functionality other ng-events have, just with the drag events also. I looked at the source here and for the most part copied how the source creates the ng-event directives.

Include ngDrag as a dependency. You can use all ng-drag* events.

(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

You can Use Angular Drag and Drop for AngularJS By codef0rmer. It's quite easy to implement and supports both angular and jquery callbacks for the events raised in drag and drop

In your case, for drag feature, you can write it as

<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>

I personally use it and found it very easy.

More Details Here