将对象从一个 ng-repeat 拖放到另一个 ng-repeat

Question

我正在制作具有编辑、删除、添加等功能的 trello 类型的应用程序，但我无法将对象从一个 ng-repeat 拖放到另一个，请不要标记重复我是 angular js 新手，我可以拖动它，但无法在我的数组中更新它

HTML

<div class="header">
    <button type="button" ng-click="openTaskDialog()" class="btn btn-primary">ADD/EDIT TASK</button>
</div>

<div class="taskProgressHeader">

    <div class="tasksProgress">
        <div class="taskHeading">
            <h1>PENDING</h1>
        </div>
        <div class="pending" draggable="true" ng-repeat="taskNo in pending">
            <h6>{{taskNo.taskTitle}}</h6>
            <h6>{{taskNo.description}}</h6>
            <h6>{{taskNo.process}}</h6>
            <img class="taskEdit" ng-click="openTaskDialog($index,'pending')" ng-src="images/edit.png">
            <img class="taskEdit" ng-click="deleteTask($index,'pending')" ng-src="images/delete.png">
        </div>
    </div>
    <div class="tasksProgress">
        <div class="taskHeading">
            <h1>IN PROCESS</h1>
        </div>
        <div class="inProcess" droppable="true" ng-repeat="taskNo in inProcess">
            <h6>{{taskNo.taskTitle}}</h6>
            <h6>{{taskNo.description}}</h6>
            <h6>{{taskNo.process}}</h6>
            <img class="taskEdit" ng-click="openTaskDialog($index,'inProcess')" ng-src="images/edit.png">
            <img class="taskEdit" ng-click="deleteTask($index,'inProcess')" ng-src="images/delete.png">
        </div>
    </div>
    <div class="tasksProgress">
        <div class="taskHeading">
            <h1>COMPLETED</h1>
        </div>
        <div class="completed" ng-repeat="taskNo in completed">
            <h6>{{taskNo.taskTitle}}</h6>
            <h6>{{taskNo.description}}</h6>
            <h6>{{taskNo.process}}</h6>
        </div>
    </div>

</div>

JS

var app = angular.module("myApp", ["ngRoute","ngMaterial","ui.bootstrap"]);

app.config(function($routeProvider,$locationProvider) {
  $locationProvider.html5Mode(true);
  $routeProvider
  .when('/task',{
    templateUrl : 'task.html',
    controller  : 'taskController'
  });
});

app.service('serviceStorage', function() {
  this.myFunc1 = function () {
      return JSON.parse(localStorage.getItem("pendingArray"));
  }
});

app.controller('taskController',function($scope,$mdDialog,$rootScope,serviceStorage){
  console.log("task controller loaded",serviceStorage.myFunc1());


  if(serviceStorage.myFunc1() == null){
    $rootScope.pending = [];
  }
  else{
    $rootScope.pending = serviceStorage.myFunc1();
  }
  console.log("rs ",$rootScope.pending.length);
  $rootScope.inProcess = [];
  $scope.completed = [];

  $scope.openTaskDialog = function(index,status){
    console.log("clicked task dialog");

    $mdDialog.show({
      controller: DialogController,
      templateUrl:'addTasks.html'
    })

    function DialogController($scope, $rootScope, $mdDialog) {
      console.log("dialog controller opened");

      $scope.formSubmit = function(formObj){
        if(status == 'pending'){
          $rootScope.pending[index].taskTitle = $scope.formObj.taskTitle;
          $rootScope.pending[index].description = $scope.formObj.description;
          $rootScope.pending[index].process = $scope.formObj.process;
          localStorage.setItem("pendingArray",JSON.stringify($rootScope.pending));
        }
        else if(status == 'inProcess'){
          $rootScope.inProcess[index].taskTitle = $scope.formObj.taskTitle;
          $rootScope.inProcess[index].description = $scope.formObj.description;
          $rootScope.inProcess[index].process = $scope.formObj.process;
        }
        else{
          console.log("2" ,$scope.formObj.taskTitle);
          console.log("form data",formObj);
          $rootScope.pending.push(formObj);
          console.log($rootScope.pending);
          localStorage.setItem("pendingArray",JSON.stringify($rootScope.pending));
        }

        $mdDialog.hide();
      }

      $scope.cancel = function(){
        console.log("cancel");
        $mdDialog.hide();
      }

    }

  }

  $scope.deleteTask = function(index,status){
    console.log("status ",status);
    if(status == 'pending'){
      $rootScope.pending.splice(index,1);
      console.log("$rootScope",$rootScope.pending);
      console.log("index ",$rootScope.pending[index]);
      localStorage.setItem("pendingArray",JSON.stringify($rootScope.pending));
    }
    else if(status == 'inProcess'){
      $scope.inProcess.splice(index,1);
      console.log("inProcess ",$scope.inProcess);
    }

  }

});

当我将对象从待处理数组拖动并移动到 inProcess 数组时，我想将对象从待处理数组拖动到 inProcess 数组，并将 inProcess 数组拖动到 Completed 数组，拖动的对象应该从待处理数组中删除并推送到 inProcess 数组所以on for inProcess 数组到完成数组

Answer 1

你需要附加一个指令或函数来获取drop后的数据。请检查此示例。

HTML

<div id="div1" drop-on-me>
  <img src="https://www.w3schools.com/html/img_w3slogo.gif" drag-me  id="drag1" width="88" height="31">
</div>

<div id="div2" drop-on-me></div>

JS

angular
  .module('myApp', []);

angular
  .module('myApp')
  .directive('dragMe', dragMe)
  .directive('dropOnMe', dropOnMe);

dragMe.$inject = [];

function dragMe() {
  var DDO = {
    restrict: 'A',
    link: function(scope, element, attrs) {
      element.prop('draggable', true);
      element.on('dragstart', function(event) {
        event.dataTransfer.setData('text', event.target.id)
      });
    }
  };
  return DDO;
}
dropOnMe.$inject = [];
function dropOnMe() {
  var DDO = {
    restrict: 'A',
    link: function(scope, element, attrs) {
      element.on('dragover', function(event) {
        event.preventDefault();
      });
      element.on('drop', function(event) {
        event.preventDefault();
        var data = event.dataTransfer.getData("text");
        event.target.appendChild(document.getElementById(data));
      });
    }
  };
  return DDO;
}

CSS

#div1,
#div2 {
  float: left;
  width: 100px;
  height: 35px;
  margin: 10px;
  padding: 10px;
  border: 1px solid black;
}