Drag a object from one ng-repeat and drop to another ng-repeat

Question

I am making trello kind of application with some features like edit,delete,add but i am not able to drag and drop and object from one ng-repeat to another,please don't mark duplicate i am new to angular js, i am able to drag it but not able to update it in my array

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);
    }

  }

});

I want to drag and object from pending array to inProcess array and inProcess array to Completed array when i drag and move the object from pending array to inProcess array the object dragged should be removed from the pending array and pushed to inProcess array so on for inProcess array to completed array

Answer 1

you need to attach a directive or function to get data after drop. Please check this example.

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;
}