拖放到重定向到html时不起作用

问题描述

var app = angular.module('main',['ngRoute']);

app.config(function($routeProvider) {
    $routeProvider.when('/',{
        templateUrl: './views/login.html',controller: 'loginController'
    }).when('/home',{
        resolve :{
            "check": function($location,$rootScope){
                if(!$rootScope.loggedIn){
                    $location.path('/');
                }
            }
        },templateUrl: './views/home.html',controller: 'homeController'
    })
    .otherwise({
        template: '404'
    })
});



app.controller('loginController',function($scope,$location,$rootScope) {
    $scope.login = function() {
        
        if($scope.username=="admin" && $scope.password=="admin"){
            $rootScope.loggedIn=true;
            $location.path('/home');
        }
        else $scope.error="Incorrect Username/Password!";
    }
});

app.controller('homeController',user) {

});

const list_items = document.querySelectorAll('.list-item');
const lists = document.querySelectorAll('.list');

let draggedItem = null;

for (let i = 0; i < list_items.length; i++) {
    const item = list_items[i];

    item.addEventListener('dragstart',function (e) {
        e.preventDefault();
        draggedItem = item;
        setTimeout(function () {
            item.style.display = 'none';
        },0)
    });

    item.addEventListener('dragend',function () {
        setTimeout(function () {
            draggedItem.style.display = 'block';
            draggedItem = null;
        },0);
    })

    for (let j = 0; j < lists.length; j ++) {
        const list = lists[j];

        list.addEventListener('dragover',function (e) {
            e.preventDefault();
        });
        
        list.addEventListener('dragenter',function (e) {
            e.preventDefault();
            this.style.backgroundColor = 'rgba(224,245,179,0.5)';
        });

        list.addEventListener('dragleave',function (e) {
            this.style.backgroundColor = 'rgba(224,0.7)';
        });

        list.addEventListener('drop',function (e) {
            console.log('drop');
            this.append(draggedItem);
            this.style.backgroundColor = 'rgba(224,0.7)';
        });
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main">
        <div class="header">
            <h1 style="margin:0 auto">Kanban</h1>
        </div>
        <div class="lists">
            <div class="list">
                <h1> BACKLOG </h1>
                <div class="list-item" draggable="true">List item 1</div>
                <div class="list-item" draggable="true">List item 2</div>
                <div class="list-item" draggable="true">List item 3</div>
            </div>
            <div class="list">
            </div>
        </div>
    </div>

我正在使用登录名和看板创建一个简单的应用程序。用户登录时，网站将其重定向到看板。当我用看板（home.html）启动html时，列表项的拖放工作正常，但是当我尝试先登录并访问看板时，会显示看板，但是拖放不起作用。 我正在尝试将列表项从一个列表拖放到另一个列表中

当用户单击登录时，它将重定向到看板的/ home。到目前为止，我只为管理员编写了它，但现在并不重要。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）