AngularJS ng-ziehen

Question

Ich bin neu bei AngularJS und ich habe ein wenig Druck auf das aktuelle Projekt, weshalb ich hier frage.

Ich sehe, dass AngularJS hat ng-dragstart Ereignis (http://docs.ng.dart.ant.c-k.me/angular.directive/NgEventDirective.html), aber es scheint nicht zu funktionieren. Auf anderen Seiten kann ich sehen, dass andere Entwickler neue Direktiven empfehlen.

Also meine Frage ist: "Gibt es eine native Drag-Funktion in AngularJS implementiert oder sollte ich selbst implementieren?"

Answer 1

Sie müssen es selbst implementieren, wenn Sie wollen ein bereits gemacht ein nicht verwenden. Ich habe selbst etwas zusammengeworfen.

Was ich brauchte, war eine einfache Möglichkeit, die Ziehereignisse in einem eckigen Kontext zu verwenden. Ich wollte genau die gleiche Funktionalität wie andere ng-Events, nur mit den Drag-Events auch. Ich schaute auf die Quelle here und zum größten Teil kopiert, wie die Quelle die ng-Event-Anweisungen erstellt.

Enthalten ngDrag als Abhängigkeit. Sie können alle ng-drag* Ereignisse verwenden.

(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

Sie können Angular Drag & Drop für AngularJS von codef0rmer verwenden. Es ist ziemlich einfach zu implementieren und unterstützt sowohl Winkel- und jquery Rückrufe für die in Drag angehoben Ereignisse und

In Ihrem Fall für Drag-Drop-Funktion, können Sie es als

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

schreiben kann ich es persönlich verwenden und gefunden es ist sehr einfach.

Details Here