AngularJS ng-拖动

Posted 2023-05-08

【中文标题】AngularJS ng-拖动

【英文标题】：AngularJS ng-drag

【发布时间】：2014-10-26 14:19:05

【问题描述】：

我是 AngularJS 的新手，我对当前项目有点压力，这就是我在这里问的原因。

我看到 AngularJS 有 ng-dragstart 事件 (http://docs.ng.dart.ant.c-k.me/angular.directive/NgEventDirective.html) 但它似乎不起作用。在其他页面上，我可以看到其他开发人员建议执行新的“指令”。

所以我的问题是：“AngularJS 中是否实现了原生 ng-drag 功能，还是我应该自己实现？”

【问题讨论】：

您发布的链接是针对 Dart，而不是 angular.js。 Angular.js 没有原生的拖动指令。

好吧，这就是我一直在寻找的答案

【参考方案1】：

如果您不想使用已经制作好的，则需要自己实现。我自己拼凑了一些东西。

我需要的是一种在角度上下文中使用拖动事件的简单方法。我想要其他 ng-events 具有的完全相同的功能，只是拖动事件也一样。我查看了源代码here，并且大部分复制了源代码如何创建 ng-event 指令。

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

【讨论】：

null 和 true args 到 parse 是什么意思？我在 Angular 文档中看到了唯一的论点 expression：docs.angularjs.org/api/ng/service/$parse

@ars 有趣的问题。我只是从源代码中复制的，但看起来他们做了一些事情：***.com/questions/31053051/…

【参考方案2】：

您可以通过 codef0rmer 为 AngularJS 使用 Angular 拖放。对于拖放中引发的事件，它很容易实现并支持 angular 和 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

【讨论】：

是的，但我的问题的严格答案是“没有原生 AngularJS 指令可以处理拖放功能，我必须使用除此之外的东西” - 对吗？

是的。如果您愿意进行大量操作，您实际上应该使用自定义指令。

AngularJS 没有为可拖动提供本机指令。但是，文档提供了一个本地示例，说明如何创建一个简单的可拖动对象，我觉得它非常有用，也是一个很好的起点create a directive that lets a user drag an element