如何使用 JavaScript 将图像拖放到现有图像之上？
亚当·布雷斯林
现在，我正在构建一个可以玩游戏的功能性棋盘，但是我在弄清楚如何让棋子拖放到一些绿点之上时遇到了麻烦。
问题图片： 
我试图拖动这个棋子并将它放在两个点之一上，但我不知道如何去做。每当我尝试将棋子拖到绿点上方时，我的棋子最终都会消失。我该如何解决这个问题？
如果有帮助，绿点位于某些 div 标签内。绿点设置为不显示，仅在您单击典当时出现。我只需要人们看看第 5、6 和 7 行白棋子所在的位置和绿点所在的位置，就是这样。
我只为第 5 行和第 6 行的每一行中的一个 div 设置了一些拖动事件，我还为第 7 行的第一个白色 pawn 设置了一个拖动事件，我只是在其中的一个部分进行了测试我的板子，你可以从上图中看到。这是我的...
JsFiddle：https ://jsfiddle.net/nitroadam1233/ckn216px/2/
JavaScript 代码：
//dragging white pawns
function allowDrop(event) {
event.preventDefault();
}
function drag(event) {
event.dataTransfer.setData("text", event.target.id);
}
function drop(event) {
event.preventDefault();
var data = event.dataTransfer.getData("text");
var newNode = document.getElementById(data).cloneNode(true);
clearChildren(event.target);
event.target.appendChild(newNode);
}
function clearChildren(el) {
while (el.firstChild) {
el.removeChild(el.firstChild);
}
}
HTML代码：
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="board">
<!-- 1st row -->
<div><img src="images/black_rook.png" draggable="true" ondragstart="drag(event)" height="65px" width="65px"></div>
<div><img src="images/black_knight.png" draggable="true" ondragstart="drag(event)" height="65px" width="65px"></div>
<div><img src="images/black_bishop.png" draggable="true" ondragstart="drag(event)" height="65px" width="65px"></div>
<div><img src="images/black_queen.png" draggable="true" ondragstart="drag(event)" height="65px" width="65px"></div>
<div><img src="images/black_king.png" draggable="true" ondragstart="drag(event)" height="65px" width="65px"></div>
<div><img src="images/black_bishop.png" draggable="true" ondragstart="drag(event)" height="65px" width="65px"></div>
<div><img src="images/black_knight.png" draggable="true" ondragstart="drag(event)"height="65px" width="65px"></div>
<div><img src="images/black_rook.png" draggable="true" ondragstart="drag(event)" height="65px" width="65px"></div>
<!-- 2nd row-->
<div><img src="images/black_pawn.png" draggable="true" ondragstart="drag(event)" class="black_pawns" height="65px" width="65px"></div>
<div><img src="images/black_pawn.png" draggable="true" ondragstart="drag(event)" class="black_pawns" height="65px" width="65px"></div>
<div><img src="images/black_pawn.png" draggable="true" ondragstart="drag(event)" class="black_pawns" height="65px" width="65px"></div>
<div><img src="images/black_pawn.png" draggable="true" ondragstart="drag(event)" class="black_pawns" height="65px" width="65px"></div>
<div><img src="images/black_pawn.png" draggable="true" ondragstart="drag(event)" class="black_pawns" height="65px" width="65px"></div>
<div><img src="images/black_pawn.png" draggable="true" ondragstart="drag(event)" class="black_pawns" height="65px" width="65px"></div>
<div><img src="images/black_pawn.png" draggable="true" ondragstart="drag(event)" class="black_pawns" height="65px" width="65px"></div>
<div><img src="images/black_pawn.png" draggable="true" ondragstart="drag(event)" class="black_pawns" height="65px" width="65px"></div>
<!-- 3rd row empty-->
<div class="empty_squares"></div>
<div class="empty_squares"></div>
<div class="empty_squares"></div>
<div class="empty_squares"></div>
<div class="empty_squares"></div>
<div class="empty_squares"></div>
<div class="empty_squares"></div>
<div class="empty_squares"></div>
<!-- 4th row empty-->
<div class="empty_squares"></div>
<div class="empty_squares"></div>
<div class="empty_squares"></div>
<div class="empty_squares"></div>
<div class="empty_squares"></div>
<div class="empty_squares"></div>
<div class="empty_squares"></div>
<div class="empty_squares"></div>
<!-- 5th row empty-->
<div class="empty_squares5" ondrop="drop(event)" ondragover="allowDrop(event)"><img src="images/greenDot.png" height="40px" width="60px"></div>
<div class="empty_squares5"><img src="images/greenDot.png" height="40px" width="60px"></div>
<div class="empty_squares5"><img src="images/greenDot.png" height="40px" width="60px"></div>
<div class="empty_squares5"><img src="images/greenDot.png" height="40px" width="60px"></div>
<div class="empty_squares5"><img src="images/greenDot.png" height="40px" width="60px"></div>
<div class="empty_squares5"><img src="images/greenDot.png" height="40px" width="60px"></div>
<div class="empty_squares5"><img src="images/greenDot.png" height="40px" width="60px"></div>
<div class="empty_squares5"><img src="images/greenDot.png" height="40px" width="60px"></div>
<!-- 6th row empty-->
<div class="empty_squares5" ondrop="drop(event)" ondragover="allowDrop(event)"><img src="images/greenDot.png" height="40px" width="60px"></div>
<div class="empty_squares5"><img src="images/greenDot.png" height="40px" width="60px"></div>
<div class="empty_squares5"><img src="images/greenDot.png" height="40px" width="60px"></div>
<div class="empty_squares5"><img src="images/greenDot.png" height="40px" width="60px"></div>
<div class="empty_squares5"><img src="images/greenDot.png" height="40px" width="60px"></div>
<div class="empty_squares5"><img src="images/greenDot.png" height="40px" width="60px"></div>
<div class="empty_squares5"><img src="images/greenDot.png" height="40px" width="60px"></div>
<div class="empty_squares5"><img src="images/greenDot.png" height="40px" width="60px"></div>
<!-- 7th row-->
<div class="seventh_squares"><img src="images/white_pawn.png" draggable="true" id="item1" ondragstart="drag(event)" onmousedown="dontShowDots(event)" onclick="showDots()" height="65px" width="65px"></div>
<div class="seventh_squares"><img src="images/white_pawn.png" draggable="true" id="" class="" onmousedown="dontShowDots2(event)" onclick="showDots2()" height="65px" width="65px"></div>
<div class="seventh_squares"><img src="images/white_pawn.png" draggable="true" id="" class="" onmousedown="dontSD3(event)" onclick="showDots3()" height="65px" width="65px"></div>
<div class="seventh_squares"><img src="images/white_pawn.png" draggable="true" id="" class="" onmousedown="dontShowDots4(event)" onclick="showDots4()" height="65px" width="65px"></div>
<div class="seventh_squares"><img src="images/white_pawn.png" draggable="true" id="" class="" onmousedown="dontShowDots5(event)" onclick="showDots5()" height="65px" width="65px"></div>
<div class="seventh_squares"><img src="images/white_pawn.png" draggable="true" id="" class="" onmousedown="dontShowDots6(event)" onclick="showDots6()" height="65px" width="65px"></div>
<div class="seventh_squares"><img src="images/white_pawn.png" draggable="true" id="" class="" onmousedown="dontShowDots7(event)" onclick="showDots7()" height="65px" width="65px"></div>
<div class="seventh_squares"><img src="images/white_pawn.png" draggable="true" id="" class="" onmousedown="dontShowDots8(event)" onclick="showDots8()" height="65px" width="65px"></div>
<!-- 8th row-->
<div><img src="images/white_rook.png" draggable="true" ondragstart="drag(event)" height="65px" width="65px"></div>
<div><img src="images/white_knight.png" draggable="true" ondragstart="drag(event)" height="65px" width="65px"></div>
<div><img src="images/white_bishop.png" draggable="true" ondragstart="drag(event)" height="65px" width="65px"></div>
<div><img src="images/white_queen.png" draggable="true" ondragstart="drag(event)" height="65px" width="65px"></div>
<div><img src="images/white king.png" draggable="true" ondragstart="drag(event)" height="65px" width="65px"></div>
<div><img src="images/white_bishop.png" draggable="true" ondragstart="drag(event)" height="65px" width="65px"></div>
<div><img src="images/white_knight.png" draggable="true" ondragstart="drag(event)" height="65px" width="65px"></div>
<div><img src="images/white_rook.png" draggable="true" ondragstart="drag(event)" height="65px" width="65px"></div>
<script src="interactive.js"></script>
</div>
</body>
</html>
铷
代码有很多可以优化的地方，但是要解决具体问题，需要对 drop 函数进行如下修改，注释表明这两个新行后面的目的......
function drop(event) {
event.preventDefault();
var data = event.dataTransfer.getData("text");
var newNode = document.getElementById(data).cloneNode(true);
// Clear the drag square of the piece IMG...
clearChildren( document.getElementById(data).parentNode );
clearChildren(event.target);
event.target.appendChild(newNode);
// Finally, remove the "empty_squares5" class from the drop square.
event.target.classList.remove( 'empty_squares5' );
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
编辑于
相关文章
TOP 榜单
- 1
蓝屏死机没有修复解决方案
- 2
计算数据帧中每行的NA
- 3
UITableView的项目向下滚动后更改颜色，然后快速备份
- 4
Node.js中未捕获的异常错误，发生调用
- 5
在 Python 2.7 中。如何从文件中读取特定文本并分配给变量
- 6
Linux的官方Adobe Flash存储库是否已过时？
- 7
验证REST API参数
- 8
ggplot：对齐多个分面图-所有大小不同的分面
- 9
Mac OS X更新后的GRUB 2问题
- 10
通过 Git 在运行 Jenkins 作业时获取 ClassNotFoundException
- 11
带有错误“ where”条件的查询如何返回结果？
- 12
用日期数据透视表和日期顺序查询
- 13
VB.net将2条特定行导出到DataGridView
- 14
如何从视图一次更新多行（ASP.NET - Core）
- 15
Java Eclipse中的错误13，如何解决？
- 16
尝试反复更改屏幕上按钮的位置 - kotlin android studio
- 17
离子动态工具栏背景色
- 18
应用发明者仅从列表中选择一个随机项一次
- 19
当我尝试下载 StanfordNLP en 模型时，出现错误
- 20
python中的boto3文件上传
- 21
在同一Pushwoosh应用程序上Pushwoosh多个捆绑ID
我来说两句