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

Solution 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);
}());

Solution 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

Comments

[Oskar Szura]

Yes but the strict answer for my question is "there is no native AngularJS directive that handles drag 'n drop functionalit and I have to use something in addition to this" - is that right?

[Manish Kr. Shukla]

Yes. And you should actually use a custom directive, if you are willing for extensive manipulations.

[Shahar]

AngularJS provides no native directive for draggable. However, the documentation gives a native example of how to create a simple draggable object which I find very useful and a good starting point create a directive that lets a user drag an element

[ars]

What do those null and true args to parse mean? I see the only argument expression in Angular docs: docs.angularjs.org/api/ng/service/$parse

[jeremy]

@ars interesting question. i just copied from the source, but looks like they do something: stackoverflow.com/questions/31053051/…