在AngularJS中拖放

Question

我正在嘗試使用c0deformer的jQuery UI實現來實現拖放操作（請參閱：http://codef0rmer.github.io/angular-dragdrop/#/）拖動部分工作正常，但我似乎無法獲得我在根據下降。在這個應用程序中，我希望能夠拖放可拖動項目的目標div中的任何位置，即我不希望目標範圍限制爲列表類型結構（或一組重複的div）。這主要是因爲用戶會隨時拖動物品，並且無法知道用戶將事先拖放多少物品。

我已經沖刷網頁，找不到在角使用拖放沒有從一個列表有效地拖動到另一個列表的例子。這可以做到嗎？如果是這樣，我不知道如何在物品被拖拽後適當地更新範圍。在下面的示例代碼中，被刪除的項目被推入第二個列表的範圍中，並且應用新範圍。理想情況下，丟棄項目的範圍是我上面提到的目標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