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/ 它可能是您正在寻找的，而无需重新发明轮子。源代码可用，因此您可以随时改进。

AngularJS拖放 - 如何检测拖动的内容以及放置的位置？

1 个答案: