AngularJS ng-przeciągnij

Question

Jestem nowy w AngularJS i mam niewielki nacisk na bieżący projekt, dlatego o to tutaj pytam.

Widzę, że AngularJS ma zdarzenie ng-dragstart (http://docs.ng.dart.ant.c-k.me/angular.directive/NgEventDirective.html), ale wygląda na to, że nie działa. Na innych stronach widzę, że inni deweloperzy zalecają tworzenie nowych "dyrektyw".

Moje pytanie brzmi: "Czy w AngularJS implementowana jest natywna funkcja ng-drag czy też powinienem ją wdrożyć samodzielnie?"

Answer 1

Musisz je wdrożyć samodzielnie, jeśli nie chcesz używać już robione jeden. Sam coś zrzuciłem.

Potrzebowałem prostego sposobu na wykorzystanie zdarzeń przeciągania w kontekście kątowym. Chciałem dokładnie tej samej funkcjonalności, co inne zdarzenia ng, po prostu z opcjami przeciągania. Spojrzałem na źródło here i w większości skopiowałem, w jaki sposób źródło tworzy dyrektywy ng-event.

Dołącz jako ngDrag jako zależność. Możesz użyć wszystkich zdarzeń 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

Możesz użyć Angular Drag and Drop dla AngularJS By codef0rmer. Jest to dość łatwe do wdrożenia i obsługuje zarówno kątowe i jquery wywołania zwrotne dla wydarzeń podniesionych w przeciągnij i upuść

W twoim przypadku, dla funkcji drag, można napisać go jako

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

ja osobiście go używać i znaleźć to bardzo łatwe.

Szczegóły Here