0
這是一個簡單的代碼，它應該簡單地更改目標div的邊框和背景顏色，當它們懸停時。顏色應該根據拖動的內容而改變，它應該決定ondragstart。然而沒有任何反應，事實上我的光標是不允許的。 （通過它循環）那麼問題是什麼。ondragover事件不起作用
<!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"><- Back to launch page</a>
<hr>
<p style= "text-align: right"> done by <br>Justin Michel <br> u14369852</p>
<hr>
</footer>
你使用控制檯進行debuigging嗎？ event.target.style.border-clolor =「red」; // camel cased and misspel event.target.style.background-color =「＃59F2F7」; //應該是camelcased – konradluka