AngularJS ng-sürükle

Question

AngularJS’de yeniyim ve şu anki projeye biraz baskı yapıyorum.

AngularJS'nin ng-dragstart olayı olduğunu görüyorum (http://docs.ng.dart.ant.c-k.me/angular.directive/NgEventDirective.html) ama işe yaramıyor. Diğer sayfalarda diğer geliştiricilerin yeni 'direktifler' yapmayı önerdiğini görebiliyorum.

Benim sorum şu: "AngularJS içinde uygulanan yerel bir ng-sürükle functinallity var mı yoksa kendi başıma uygulamalı mıyım?"

Answer 1

bir tane zaten yapılmış kullanmak istemiyorsanız Kendin uygulamak gerekir. Birlikte kendim bir şey attım.

İhtiyacım olan şey, sürükleme olaylarını açısal bir bağlamda kullanmanın basit bir yoluydu. Sadece diğer sürükleme olayları ile, diğer ng-olayların aynı işlevselliğini istedim. Kaynak here'a baktım ve çoğu zaman kaynağın ng-event direktiflerini nasıl yarattığını kopyaladım.

Bağımlılık olarak ngDrag'u ekleyin. Tüm ng-drag* olaylarını kullanabilirsiniz.

(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

AngularJS için Açısal Sürükle ve Bırak özelliğini kullanabilirsiniz codef0rmer. Bu uygulamaya oldukça kolay ve sürükle özelliği için, sürükle büyüdü ve durumda

damla olaylar için açısal ve jquery geri aramalar hem sen

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

Ben şahsen kullanmak ve bulunan olarak yazabiliriz destekler bu çok kolay.

Detaylar Here