拖放在AngularJS

问题描述

我想实现拖放使用拖放c0deformer的jQuery UI的实现（在这里看到：的）拖动部分工作正常，但我似乎无法让我在下跌的条款后的功能。在这个应用程序，我希望能够在任何地方降目标专区内可拖动的项目，即我不想在目标范围被限制在一个列表型结构（或一组重复的div）。主要这是因为用户会在飞行被拖动的项目并会有无法知道用户将有多少项目拖动并提前下降的方式。

我已经冲刷网页，找不到在角使用拖放没有从一个列表有效地拖动到另一个列表中的一个例子。可以这样做？如果是这样，我不知道怎么的项目一直拖到以后我会适当地更新的范围。在本实施例$ C $下面c时，丢弃的数据项都被推入第二列表的范围和应用新的范围。理想情况下，掉落的物品的范围是我上面提到的目标股利。我真正的新角度，所以任何的建议是非常AP preciated。

从片段c0deformer：

  app.directive（'可弃，函数（$编译）{
    返回{
        限制：'A'，
        链接：功能（范围，元素，ATTRS）{
            //这使得一个元素器可弃
            element.droppable（{
                下降：函数（事件，UI）{
                    VAR dragIndex = angular.element（ui.draggable）。数据（索引），
                        dragEl = angular.element（ui.draggable）.parent（），
                        dropEl = angular.element（本）;                        的console.log（dropEl）;                    如果（dragEl.hasClass（'list1的）及和放大器;！dropEl.hasClass（'list1的）及和放大器;拒绝==真！）{
                    scope.list2.push（scope.list1 [dragIndex]）;
                    scope.list1.splice（dragIndex，1）;
                }否则如果（dragEl.hasClass（列表2）及和放大器;！dropEl.hasClass（列表2）及和放大器;！拒绝==真）{
                    scope.list1.push（scope.list2 [dragIndex]）;
                    scope.list2.splice（dragIndex，1）;
                }
                。范围$适用（）;
            }
        }）;
    }
};
}）;
 

解决方案

我最近创建了拖放不依赖于jQuery的的用户界面的角度指令。它使用HTML5拖放API。它也不会对被拖动或丢弃的数据的格式的任何要求，它简单地设置为当一个元件被拖到另一个你要通知的钩

发表这里：<一href=\"http://jasonturim.word$p$pss.com/2013/09/01/angularjs-drag-and-drop/\">http://jasonturim.word$p$pss.com/2013/09/01/angularjs-drag-and-drop/

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

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.

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.

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

解决方案

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.

Post here: http://jasonturim.wordpress.com/2013/09/01/angularjs-drag-and-drop/

Demo here: http://logicbomb.github.io/ng-directives/drag-drop.html

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