在AngularJS中拖放 [英] Drag and drop in AngularJS

问题描述

我正在尝试使用c0deformer的jQuery UI实现来实现拖放（请参阅这里： http： //codef0rmer.github.io/angular-dragdrop/#/ ）拖动部分工作正常，但我似乎无法获得下一步的功能。在这个应用程序中，我希望能够将可拖动项目放在目标div的任何位置，也就是说，我不希望将目标作用域限制为列表类型的结构（或一组重复的div）。主要是因为用户将会拖动项目，并且无法知道用户将提前拖放多少物品。

I am trying to implement Drag and Drop using c0deformer's jQuery UI implementation (see here: http://codef0rmer.github.io/angular-dragdrop/#/) The dragging part works fine, but I can't seem to get the functionality I am after in terms of the drop. In this application, I want to be able to drop the draggable items anywhere within a target div, i.e., I don't want the destination scope to be limited to a list-type structure (or a set of repeated divs). Mainly this is because the user will be dragging items on the fly and there will be no way of knowing how many items the user will drag and drop in advance.

我已经浏览了网页，在Angular中找不到一个使用拖放功能的例子，而无需从一个列表拖动到另一个列表。这可以做吗如果是这样，我不知道如何在拖动项目之后如何适当地更新范围。在下面的示例代码中，将丢弃的项目推入第二个列表的范围，并应用新的范围。理想情况下，丢弃物品的范围是我上面提到的目标。我真的很喜欢Angular，所以任何建议都是非常感激的。

I have scoured the web and cannot find an example in Angular that uses drag and drop without effectively dragging from one list to another list. Can this be done? If so, I am not sure how I would appropriately update the scope after an item has been dragged. In this example code below, the dropped items are pushed into the scope of a second list and the new scope is applied. Ideally, the scope of the dropped items is the target div I mentioned above. I'm really new to Angular, so any advice is immensely appreciated.

来自c0deformer的片段：

Snippet from 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();
            }
        });
    }
};
});

推荐答案

我最近创建了一个用于拖放的角度指令不依赖jquery-ui。它使用html5拖放api。它也没有对要拖放的数据的格式的任何要求，它只是设置一个钩子，当一个元素拖到另一个元素上时，您可以收到通知。

I recently created an angular directive for drag and drop that doesn't rely on jquery-ui. It uses the html5 drag and drop api. It also doesn't have any requirements on the format of the data to be dragged or dropped, it simply sets up a hook for you to be notified when one element is dragged onto another.

发布于此： http：//jasonturim.wordpress .com / 2013/09/01 / angularjs-drag-and-drop /

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

这篇关于在AngularJS中拖放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！