AngularJS ng-drag

我是AngularJS的新手，我對當前項目有點壓力，這就是我在這裏問的原因。AngularJS ng-drag

我看到AngularJS有ng-dragstart事件（http://docs.ng.dart.ant.c-k.me/angular.directive/NgEventDirective.html），但它似乎不起作用。在其他頁面上，我可以看到其他開發人員建議執行新的「指令」。

所以我的問題是：「是否有在AngularJS中實現的原生ng-drag functinallity，還是我應該自己實現？」

來源

2014-09-02 Oskar Szura

您發佈的鏈接是Dart，而不是angular.js。 Angular.js沒有本地拖拽指令。 – 2014-09-02 11:09:46

好吧，這就是我一直在尋找的答案 – 2014-09-02 11:11:09

你需要自己實現它，如果你不想使用已經造一個。我自己扔了一些東西。

我需要的是在角度上下文中使用拖動事件的簡單方法。我希望其他ng事件具有完全相同的功能，只需要拖動事件。我查看了源代碼here，並且大部分都複製了源創建ng事件指令的方式。

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

來源

2016-08-03 21:07:27 jeremy

這些'null'和'true'參數到'parse'是什麼意思？我在Angular文檔中看到唯一的參數'expression'：https://docs.angularjs.org/api/ng/service/$parse – ars 2016-08-19 14:54:29

@ars有趣的問題。我只是從源複製，但看起來像他們做的事情：http://stackoverflow.com/questions/31053051/parse-interceptorfn-expensivechecks-arguments – jeremy 2016-08-19 14:56:35

您可以對AngularJS使用Angular Drag and Drop by 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

來源

2014-09-02 11:06:21

是的，但是我的問題的嚴格答案是「沒有原生的AngularJS指令來處理拖放功能，我必須使用除此以外的東西」那對嗎？ – 2014-09-02 11:09:42

是的。如果您願意進行廣泛的操作，您應該實際使用自定義指令。 – 2014-09-02 11:43:40

AngularJS不提供可拖動的本地指令。但是，該文檔給出了一個本機示例，說明如何創建一個簡單的可拖動對象，我發現它非常有用，並且是一個很好的起點[創建一個讓用戶拖動元素的指令]（https://docs.angularjs.org/guide/directive＃creating-a-directive-that-adds-event-listeners） – Shahar 2015-01-17 20:45:33

回答

相關問題