拖放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