Question

我研究得很多，但我没有得到答案。目前我正在学习Angular和javascript，因此我正在构建一个带有HTML，Javascript和（当然）Angular的todo-app。我想要一个拖放系统...所以如果你想删除一个任务你拖动它并将其放入垃圾箱。我设法用HTML和Javascript构建一个拖放系统，但是我没有把它与我的角度代码结合起来。亲自看看：

我的HTML代码（和Javascript）。你可以拖放东西，但功能（所以如果你将任务移到垃圾箱，它将被删除）不起作用（因为我需要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>

这是我的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);
    }
});

为什么第二个不起作用？错误是：未捕获的ReferenceError：未定义拖动...为什么？

使用AngularJS拖放，Javascript和HTML不起作用

0 个答案: