javascript - ondragover 事件改变颜色-6ren

javascript - ondragover 事件改变颜色

转载作者：行者123 更新时间：2023-12-03 04:49:14

这是一段简单的代码，当目标 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>

最佳答案

以下语句不是有效的 Javascript 代码。它们被解释为减法表达式，然后尝试将值分配给没有意义的表达式。您必须将以下行替换为相应的驼峰命名法变体:

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

如果打开控制台，您可以发现这两个错误。控制台甚至为您提供跳转到代码中有问题的行的链接，这使得调试变得容易。它可能不是完整的解决方案，但修复这些问题对于您的代码正常工作是必要的。问题未提供引用的样式表，因此无法完全回答您的问题(例如，您的“阻止”光标可能是由样式表中的某些样式定义引起的)。

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

img 元素是一个 void(空)元素:在 HTML 中，在空元素上使用结束标记通常是无效的。它不是以结束，而是以 "/>" 开始标记。 input 元素也是如此。以下是文档链接:https://developer.mozilla.org/en-US/docs/Glossary/Empty_element

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

关于javascript - ondragover 事件改变颜色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42734858/

文章推荐： javascript - Typescript with Angular2 - 针对 ES5 会产生错误？

文章推荐： javascript - 使用 AJAX 编辑 JSON 文件

文章推荐： javascript - 如何找到与特定正则表达式匹配的字符串？

javascript - ondragover 事件改变颜色
这是一段简单的代码，当目标 div 悬停在其上方时，只需更改其边框颜色和背景颜色即可。颜色应该根据拖动的内容而变化，这应该由 ondragstart 决定。然而什么也没有发生，事实上我的光标是不允许的
javascript - 拖动数据传输数据在 ondragover 事件中不可用
我正在尝试掌握 html5 拖放事件的窍门。 function rowDragStart(event) { let targetRowId = event.target.attributes.
javascript - ondragover、ondragstart 和 ondrop
使用 ondragover="functioname(event)、ondragstart="functioname(event) 和 ondrop="functioname(event) HTML
python - wxpython:如何检查 OnDragOver 中的拖动数据？
我对 wxPython 中的拖放有点困惑(但也许这个问题也与其他 GUI 框架中的拖放有关)。这些框架提供了几个回调(OnEnter 和 OnDragOver)，据称它们允许我通知系统当前鼠标位置是否
angular - 简单的拖放 Angular ondrop、ondragover、ondragstart
我正在尝试在我的组件中创建简单的拖放方法，但似乎无法正常工作。这真的是我第一次处理拖放类型的东西，所以不确定我是否采取了正确的方法。刚刚采用了 W3 的教程。有什么建议？ id 将是简单地获取被拖动元
javascript - 为什么 ondragover 在 jQuery 插件中不起作用？
我遵循了使用 javascript 制作文件 uploader 的教程，并且我让它工作了，所以我认为它作为 jQuery 插件会更好，这样我就可以在页面上的不同元素上使用它。所以我开始将代码移植到我的
java - onDragOver 不会发生(在 JavaFX 中)
为什么下面的示例中没有发生 onDragOver 事件？如何实现最简单的拖动行为，即没有剪贴板的东西？ import javafx.application.Application; import j
javascript - onDrop/onDragOver HTML5 更新 div
我使用 HTML5 onDrop 和 onDragOver 将图像从一个 div 标签移动到另一个。拖/放脚本: function allowDrop(ev) { ev.preventDefaul
javascript - ondragstart、ondragover、onstart - $scope 未定义
我的任务是使用 angular 处理掉落的文本。我在拖放事件中不断收到此错误 $scope is not defined 。知道如何解决这个问题吗？我已经研究过 Angular 拖放库。他们不允许拖
javascript - 如何 ondragover 更改 jQuery droppable 中可放置区域的颜色？
请在这里查看我的jsfiddle:http://jsfiddle.net/fletchadam/mr5Uj/15/ 当您从顶部拖动项目时，我希望您将鼠标悬停在其上的单个可放置区域更改颜色。我相信技巧
javascript - 如何将 iframe 上发生的 ondragover 事件传播到包含它的父 div？
如何将 iframe 上发生的 ondragover 事件传播回包含 iframe 的父 div？我已将 ondragover 和 ondrop 事件处理程序关联到父 div。当将某些内容拖到 div
javascript - HTML5 拖放 ondragover 未在 Chrome 中触发
我这里有一个简单的例子，它对我来说在 Chrome 11 中没有触发 http://jsfiddle.net/G9mJw/它包含一个非常简单的代码: var dropzone = document.g
JavaScript addEventListener 无法与 onDrop、onDragOver 或 onDragStart 一起使用
我正在用 JavaScript 创建一个简单的图片拼图游戏，并尝试实现 HTML5 拖放 API。如果我向元素添加 ondragstart、ondragover 或 ondrop 事件(即作为属性)，
javascript - Vue.Draggable (sortable.js) 中的 ondragover 等价物
有没有办法检测是否有东西被拖过元素？或者触发悬停事件？找到了一些有关通过 onMove 向拖过的元素添加类的信息，但它似乎对我不起作用。最佳答案我用解决方案制作了一个 JSBin:https://
angularjs - ondrop ondragover - Uncaught ReferenceError : ondrop is not defined - angular - html5 draggable
我尝试用 Angular 实现 html5 拖放。代码是: 在 Controller 中: $scope.drop = function(e) { console.log('a drop') };

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - ondragover 事件改变颜色