I researched much, but I didn't get the answer. At the moment I'm learning Angular and javascript and so I'm building a todo-app with HTML, Javascript and (of course) Angular. I want to have a drag and drop system... so if you want to delete a task you drag it and drop it into the trash. I managed to build a drag and drop system with HTML and Javascript, but I don't get it to combine it with my angular code. Take a look on it by yourself:
my HTML-code (and Javascript). You can drag and drop the things,but the functionality (so if you move a task to the trash it will be deleted) doesn't work (because therefor I need Angular). :
<!DOCTYPE html>
<html ng-app="todoApp">
<head>
<title>ToDo</title>
<link rel="stylesheet" href="style.css">
<script>
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("Text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
function trashdrop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body >
<div ng-controller="Tasks as tasksCtrl">
<div class="background" ng-dblclick="close()" ondrop="drop(event)" ondragover="allowDrop(event)">
...
<div id ="$index"class="ng-class: task.classe" ng-repeat="task in tasks | orderBy:sortBy:reverse" ng-click="setEditId($index)" draggable="true" ondragstart="drag(event)" >
<img ng-src="{{task.group.image}}" width="30px" height="30px" align="right" style="margin-right: 30%">
<div style="padding: 20px">{{task.title}}</br>{{task.body}} {{task.dueDate}}</div>
</div>
...
<img src="bigtrash.png" class="trash" ondrop="trashdrop(event)" ondragover="allowDrop(event)">
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<!-- <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular-animate.js"></script> -->
<script type="text/javascript" src="app.js"></script>
</body>
</html>
and here is my javascript:
var todoApp = angular.module('todoApp', [])
todoApp.factory('TasksService', function () {
var steps = [];
var tasks = [];
var groups = [];
return {
getTasks: function () {
return tasks;
},
deleteTask: function (id) {
tasks.splice(id-1, 1);
},
getGroups: function () {
return groups;
},
getSteps: function () {
return steps;
},
getStepsId: function (id) {
return steps[id];
},
getGroupId: function (name) {
for (var i = 0; i < groups.length; i++) {
if(groups[i].name===name) {
return i;
}
};
return undefined;
},
addTask:function (task) {
tasks.push(task);
},
addStep:function (step, id) {
steps[id].push(step);
tasks[id].steps=steps[id];
},
addStepGroup:function () {
steps.push([]);
},
setTasks:function (filterdTasks) {
tasks = filterdTasks;
console.log("tasks", tasks);
},
addGroup: function (group) {
groups.push(group);
}
}
});
todoApp.controller('Tasks', function($scope, TasksService) {
var status = "done";
var priority = "3"
$scope.groups = TasksService.getGroups();
$scope.edit = false;
$scope.specedit = false;
$scope.id = null;
$scope.newgroup = false;
$scope.tasks = TasksService.getTasks();
//the drag and drop functions
$scope.allowDrop = function(ev) {
ev.preventDefault();
}
$scope.drag = function(ev) {
console.log(ev.target);
ev.dataTransfer.setData("Text", ev.target.id);
}
$scope.drop = function(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
$scope.trashdrop = function(ev) {
ev.preventDefault();
TasksService.deleteTask(ev.target.id);
var data = ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
$scope.setEdit = function() {
$scope.edit = true;
}
$scope.setEditId = function(id) {
$scope.specedit = true;
$scope.id = id;
}
$scope.deleteTask = function(id) {
TasksService.deleteTask(id);
}
$scope.close = function() {
console.log("hi");
$scope.specedit = false;
$scope.edit = false;
$scope.id = null;
$scope.newgroup = false;
}
$scope.newGroup = function() {
$scope.newgroup = true;
}
this.addTask = function(title, body, group, date) {
$scope.edit = false;
TasksService.addTask({
id: $scope.tasks.length,
title: title,
body: body,
dueDate: date,
status: status,
group: {name: group, color: TasksService.getGroups()[TasksService.getGroupId(group)].color, image: TasksService.getGroups()[TasksService.getGroupId(group)].image,},
priority: priority,
classe: "note"+(($scope.tasks.length%3)+1),
steps: [],
});
TasksService.addStepGroup();
}
$scope.addGroup = function(title, description, color) {
$scope.newgroup = false;
var image = "";
if(color === "red") {
image = "pin3.png";
} else if (color === "yellow") {
image = "pin.png";
} else if (color === "green") {
image = "pin4.png";
} else if (color === "blue") {
image = "pin2.png";
}
TasksService.addGroup({
name: title,
description: description,
color: color,
image: image,
});
}
this.addStep = function(title, body) {
TasksService.addStep({
id: $scope.tasks[$scope.id].steps.length || 0,
title: title,
body: body,
status: "notyet",
}, $scope.id);
}
});
why doesn't work the second one? the error is: Uncaught ReferenceError: drag is not defined... why?
