एंगुलरजेएस एनजी-ड्रैग

Question

मैं अंगुलरजेएस के लिए नया हूं और वर्तमान परियोजना पर मेरा थोड़ा दबाव है इसलिए मैं यहां पूछ रहा हूं।

मुझे लगता है कि AngularJS में ng-dragstart ईवेंट (http://docs.ng.dart.ant.c-k.me/angular.directive/NgEventDirective.html) है लेकिन यह काम नहीं कर रहा है। अन्य पृष्ठों पर मैं देख सकता हूं कि अन्य डेवलपर्स नए 'निर्देश' करने की सलाह देते हैं।

तो मेरा सवाल यह है: "क्या एंगुलरजेएस के भीतर लागू एक देशी एनजी-ड्रैग functinallity है या मैं खुद को कार्यान्वित करना चाहिए?"

Answer 1

तो आप पहले से किए गए एक का उपयोग नहीं करना चाहते हैं तो आप यह अपने आप को लागू करने की आवश्यकता होगी। मैंने खुद को कुछ एक साथ फेंक दिया।

मुझे एक कोणीय संदर्भ में ड्रैग घटनाओं का उपयोग करने का एक आसान तरीका था। मैं वही कार्यक्षमता चाहता था जो अन्य एनजी-इवेंट्स के साथ ही ड्रैग इवेंट्स के साथ भी हो। मैंने स्रोत here पर देखा और अधिकांश भाग के लिए स्रोत कैसे एनजी-घटना निर्देश बनाता है।

एक निर्भरता के रूप में ngDrag शामिल करें। आप सभी 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

आप AngularJS के लिए कोणीय ड्रैग और ड्रॉप का उपयोग codef0rmer द्वारा कर सकते हैं। इसे लागू करने के लिए काफी आसान है और, खींचें में उठाया और खींचें सुविधा के लिए छोड़

आपके मामले में घटनाओं के लिए दोनों कोणीय और jQuery कॉलबैक, आप के रूप में

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

मैं व्यक्तिगत रूप से इसका इस्तेमाल किया और पाया यह लिख सकते हैं का समर्थन करता है यह बहुत आसान है।

अधिक जानकारी Here