在AngularJS中拖放

Question

我正在尝试使用c0deformer的jQuery UI实现实现拖放(请参阅此处:http://codef0rmer.github.io/angular-dragdrop/#/ )拖动部分工作正常,但我似乎无法获得功能我在追求下降.在这个应用程序中,我希望能够将可拖动项目放在目标div中的任何位置,即,我不希望目标范围限于列表类型结构(或一组重复的div).主要是因为用户将动态拖动项目,并且无法知道用户将提前拖放多少项目.

我已经在网上搜索过,并且在Angular中找不到使用拖放的示例而没有有效地从一个列表拖动到另一个列表.可以这样做吗？如果是这样,我不确定在拖动项目后如何适当地更新范围.在下面的示例代码中,已删除的项目将被推入第二个列表的范围,并应用新范围.理想情况下,丢弃项目的范围是我上面提到的目标div.我是Angular的新手,所以任何建议都非常值得赞赏.

来自c0deformer的片段:

app.directive('droppable', function($compile) {
    return {
        restrict: 'A',
        link: function(scope,element,attrs){
            //This makes an element Droppable
            element.droppable({
                drop:function(event,ui) {
                    var dragIndex = angular.element(ui.draggable).data('index'),
                        dragEl = angular.element(ui.draggable).parent(),
                        dropEl = angular.element(this);

                        console.log(dropEl);

                    if (dragEl.hasClass('list1') && !dropEl.hasClass('list1') && reject !== true) {
                    scope.list2.push(scope.list1[dragIndex]);
                    scope.list1.splice(dragIndex, 1);
                } else if (dragEl.hasClass('list2') && !dropEl.hasClass('list2') && reject !== true) {
                    scope.list1.push(scope.list2[dragIndex]);
                    scope.list2.splice(dragIndex, 1);
                }
                scope.$apply();
            }
        });
    }
};
});

Answer 1

我最近创建了一个不依赖于jquery-ui的拖放角度指令.它使用html5拖放api.它对要拖放的数据的格式也没有任何要求,它只是设置一个钩子,让你在一个元素被拖到另一个元素时得到通知.

发布在这里:http://jasonturim.wordpress.com/2013/09/01/angularjs-drag-and-drop/

在这里演示:http://logicbomb.github.io/ng-directives/drag-drop.html