AngularJS拖拽功能實(shí)現(xiàn)示例

// AngularJS拖拽核心實(shí)現(xiàn)
app.controller('DragController', function($scope) {
  // 初始化可拖拽元素
  $scope.items = [ ... ]; 
  
  // 拖拽開(kāi)始事件
  window.dragStart = function(ev, index) {
    ev.dataTransfer.setData("text", index);
  };
  
  // 放置事件處理
  window.drop = function(ev, targetIndex) {
    // 獲取拖拽元素索引
    var sourceIndex = ev.dataTransfer.getData("text");
    
    // 使用Angular數(shù)據(jù)綁定更新DOM
    var item = $scope.items[sourceIndex];
    $scope.items.splice(sourceIndex, 1);
    $scope.items.splice(targetIndex, 0, item);
    $scope.$apply();
  };
});