1

我正在尝试使用 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();
            }
        });
    }
};
});
4

1 回答 1

6

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

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

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

于 2013-09-01T05:58:52.990 回答