Question

这是一个简单的代码，只需在目标div悬停时更改目标div的边界颜色和背景颜色即可。颜色应该根据被拖动的内容而改变，它应该确定ondragstart。然而没有任何反应，事实上我的光标是不允许的事情。（通过它的线圈）所以问题是什么。

<!DOCTYPE HTML>
<html>
<head>
    <title>Play four-in-a-Row</title>
    <meta charset=ütf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="styles.css">
</head>
<div class="container-fluid">
<body onload="boardSetup()">
    <div id="header" >
    <h1 id = "Main">Four-in-a-Row</h1>
    </div>
    <hr>
    <div  id = "drop">
        <div class="row">
        <div class = "col-xs-1" ></div>
            <div class = "col-xs-1" ></div>
            <div class = "square col-xs-1" data-toggle="tooltip" title = "Column 1" ondragover = "dragOver(event)" ></div>
            <div class = "square col-xs-1" data-toggle="tooltip" title = "Column 2" ondragover = "dragOver(event)"></div>
            <div class = "square col-xs-1" data-toggle="tooltip" title = "Column 3" ondragover = "dragOver(event)"></div>
            <div class = "square col-xs-1" data-toggle="tooltip" title = "Column 4" ondragover = "dragOver(event)"></div>
            <div class = "square col-xs-1" data-toggle="tooltip" title = "Column 5" ondragover = "dragOver(event)"></div>
            <div class = "square col-xs-1" data-toggle="tooltip" title = "Column 6" ondragover = "dragOver(event)"></div>
            <div class = "square col-xs-1" data-toggle="tooltip" title = "Column 7" ondragover = "dragOver(event)"></div>
        </div>
    </div>
    <hr>
    <div id="board" >
        <div class="row">
            <div class = "col-xs-1" ></div>
            <div class = "col-xs-1" ></div>
            <div class = "square col-xs-1" ></div>
            <div class = "square col-xs-1" ></div>
            <div class = "square col-xs-1" ></div>
            <div class = "square col-xs-1" ></div>
            <div class = "square col-xs-1" ></div>
            <div class = "square col-xs-1" ></div>
            <div class = "square col-xs-1" ></div>
        </div>
        <div class="row">
            <div class = "col-xs-1" ></div>
            <div class = "col-xs-1" ></div>
            <div class = "square col-xs-1" ></div>
            <div class = "square col-xs-1" ></div>
            <div class = "square col-xs-1" ></div>
            <div class = "square col-xs-1" ></div>
            <div class = "square col-xs-1" ></div>
            <div class = "square col-xs-1" ></div>
            <div class = "square col-xs-1" ></div>
        </div>
        <div class="row">
            <div class = "col-xs-1" ></div>
            <div class = "col-xs-1" ></div>
            <div class = "square col-xs-1" ></div>
            <div class = "square col-xs-1" ></div>
            <div class = "square col-xs-1" ></div>
            <div class = "square col-xs-1" ></div>
            <div class = "square col-xs-1" ></div>
            <div class = "square col-xs-1" ></div>
            <div class = "square col-xs-1" ></div>
        </div>
        <div class="row">
            <div class = "col-xs-1" ></div>
            <div class = "col-xs-1" ></div>
            <div class = "square col-xs-1" ></div>
            <div class = "square col-xs-1" ></div>
            <div class = "square col-xs-1" ></div>
            <div class = "square col-xs-1" ></div>
            <div class = "square col-xs-1" ></div>
            <div class = "square col-xs-1" ></div>
            <div class = "square col-xs-1" ></div>
        </div>
        <div class="row">
            <div class = "col-xs-1" ></div>
            <div class = "col-xs-1" ></div>
            <div class = "square col-xs-1" ></div>
            <div class = "square col-xs-1" ></div>
            <div class = "square col-xs-1" ></div>
            <div class = "square col-xs-1" ></div>
            <div class = "square col-xs-1" ></div>
            <div class = "square col-xs-1" ></div>
            <div class = "square col-xs-1" ></div>
        </div>
        <div class="row">
            <div class = "col-xs-1" ></div>
            <div class = "col-xs-1" ></div>
            <div class = "square col-xs-1" ></div>
            <div class = "square col-xs-1" ></div>
            <div class = "square col-xs-1" ></div>
            <div class = "square col-xs-1" ></div>
            <div class = "square col-xs-1" ></div>
            <div class = "square col-xs-1" ></div>
            <div class = "square col-xs-1" ></div>
        </div>

    </div>
    <div  class= "piece">
            <img src= "player_1.png" alt= "Player 1 piece" height = 15% width = 15% id = "player1" data-toggle="tooltip" title = "Player one's piece" class ="player1 piece" draggable= "true" ondragstart ="dragStart(event)" > </img>
            <img src= "player_2.png" alt= "Player 2 piece" height = 15% width = 15% id = "player2" data-toggle="tooltip" title = "Player two's piece" class = "player2 piece" draggable= "true" ondragstart ="dragStart(event)"> </img>         
    </div>
    <script>
    var map;
    var dragged = 0;
        function boardSetup(){
            var board=document.getElementsByClassName("square");
            var blank = "<img src = blank.png alt= blank class = blank>";
            for(var x = 0; x < board.length; x++){
                board[x].innerHTML(blank)
            }

            document.getElementById("board").innerHTML=board;
            var temp2 = document.getElementsByClassName("blank");
            for(var z in temp2){
                temp2[z].className += " piece";
            }
        }

        function gameStart(){
        }


        $(document).ready(function(){
            $('[data-toggle="tooltip"]').tooltip();     
        });

        function dragStart(event) {
            event.dataTransfer.setData("text", event.target.id);
            if(event.target.id == "player1")
                dragged = 1;
            else if(event.target.id){
                dragged = 2;
            }
        }

        function dragOver(event){
            event.preventDefault();
            if(draaged = 1){
                event.target.style.border = "blue";
                event.target.style.background-color = "#59F2F7";    
            }else if(draaged = 2){
                event.target.style.border-clolor = "red";
                event.target.style.background-color = " #F75D59";
            }
        }


</script>
<input type="button" onclick="boardSetup()" value="Reset" class="btn btn-danger btn-block" > </input>
</div>
</body>

<footer>
    <hr>
    <a href="../index.html">&lt;- Back to launch page</a>
    <hr>
    <p style= "text-align: right"> done by <br>Justin Michel <br> u14369852</p>
    <hr>
</footer>

Answer 1

以下语句不是有效的Javascript代码。它们被解释为子结构表达式，然后尝试将值赋给表达式，这是没有意义的。您必须使用相应的camelCase变体替换以下行：

event.target.style.background-color = "#59F2F7";
event.target.style.border-clolor = "red";
event.target.style.background-color = " #F75D59";

替换为：

event.target.style.backgroundColor = "#59F2F7";

等等。（而且没有clolor）

这样的东西

另一个错误是board[x].innerHTML(blank) - innerHTML不是函数。这是一个属性，这里是文档的链接：https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML

如果打开控制台，则可以发现这两个错误。控制台甚至为您提供了跳转到代码中违规行的链接，这使得调试变得简单。它可能不是完整的解决方案，但修复它们是您的代码工作所必需的。引用的样式表未提供问题，因此无法完全回答您的问题（例如，您和＃34;阻止＆＃34;光标可能是由样式表中的某个样式定义引起的。）

您发布的代码存在更多问题，即使可能与拖动事件没有直接关系，但仍值得提升。

img元素是一个void（空）元素：在HTML中，在空元素上使用结束标记通常是无效的。它不是用关闭，而是用开始标记上的＆＃34; /＆gt;＆＃34; 关闭。 input元素也是如此。以下是文档链接：https://developer.mozilla.org/en-US/docs/Glossary/Empty_element

body标签不应嵌套在div内，即使它有效，也不是一个好习惯。 https://www.w3.org/TR/html5/sections.html#the-body-element

ondragover事件不起作用

1 个答案: