将对象从一个ng重复拖动到另一个ng反复

Question

我正在制作trello类型的应用程序，具有编辑、删除、添加等功能，但我无法拖放和对象从一个ng重复到另一个ng，请不要标记重复。我是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数组拖动到Completed数组。当我将对象从未决数组拖动到inProcess数组时，拖动的对象应该从挂起数组中删除并推到inProcess阵列，依此类推，使inProcess数组成为Completed数组

Answer 1

您需要附加一个指令或函数来获取删除后的数据。请检查这个例子。

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