AngularJS Drag and Drop - 如何检测拖动的内容和放置的位置？

Question

我们目前正在构建我们的第一个 AngularJS 应用程序。该网站的一部分要求用户能够将用户拖入群组。例如，在 Google+ 圈子中，用户可以选择另一个用户并将他们拖到一个圈子中，然后将他们添加到该组中。

我们知道我们必须创建一个指令来实现这一点，并提出了以下内容：

var DragDrop = angular.module('ajs.Directive.dragDrop', []);

DragDrop.directive('myDrag', function () {
return {

    link: function(scope, elt, attrs) 
    {      
       // scope.obj.outer = "Updated on link";            
        elt.draggable({revert:"invalid"});            
        elt.droppable({        
            //accept: function( d ) { return true; },                
            drop: function (event, ui) {
                return scope.$apply(function () {
                    alert("hello")
                    scope.inner = 'Dropped';                        
                   // scope.obj.outer = 'Updated on drop';                    
                });                
            }            
        });          
    }        
}
});

这允许我们拖动我们的联系人。但是，我们正在努力找出如何将联系人放入组中，特别是如何检测已拖动内容的元素 ID 和放置位置的元素 ID。

最后，使用上面的示例，当您拖动一个项目时，该项目保持在新位置，但我们要求它返回到其正常位置。

我们在 elt.droppable 中尝试了revert:"invalid"，但没有奏效。

作为一个简短的说明，我们不能使用 jQuery，因为这些项目在 ng-repeat 中。 我被引导相信指令是这里唯一的解决方案。

Answer 1

查看：http://ganarajpr.github.io/angular-dragdrop/ 这可能是您正在寻找的东西，而无需重新发明轮子。 源代码可用，因此您可以随时改进。