javascript - 如何在td内画圆？
问题描述
我一直在到处寻找解决问题的方法，但找不到任何有用的...画布，所以这不是很有用） - 现在当我将一张图像拖到另一张图像上时，它会擦除拖动的图像，是否可以让它相反？感谢所有评论
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="example.css">
<script type="text/javascript" src="script.js"> </script>
<title>Chess</title>
</head>
<body>
<br>
<br>
<br>
<br>
<br>
<br>
<table align=center border="1">
<tr>
<td class="poradie2" height="12" width="12"></td>
<td class="poradie2" height="12" width="12"><b>a</b></td>
<td class="poradie2" height="12" width="12"><b>b</b></td>
<td class="poradie2" height="12" width="12"><b>c</b></td>
<td class="poradie2" height="12" width="12"><b>d</b></td>
<td class="poradie2" height="12" width="12"><b>e</b></td>
<td class="poradie2" height="12" width="12"><b>f</b></td>
<td class="poradie2" height="12" width="12"><b>g</b></td>
<td class="poradie2" height="12" width="12"><b>h</b></td>
<td class="poradie2" height="12" width="12"></td>
<!--Black pieces-->
<tr>
<td class="poradie" height="33" width="12" background="none"><b>8</b></td>
<td class="pozadie2" ondrop="drop(event)" ondragover="allowDrop(event)"> <img src="b_rook.svg" alt="BR" align= center class="blck" id="drag25" draggable="true" ondragstart="drag(event)"> </td>
<td class="pozadie" ondrop="drop(event)" ondragover="allowDrop(event)"> <img src="b_knight.svg" alt="BK" align= center class="blck" id="drag26" draggable="true" ondragstart="drag(event)"> </td>
<td class="pozadie2" ondrop="drop(event)" ondragover="allowDrop(event)"> <img src="b_bishop.svg" alt="BB" align= center class="blck" id="drag27" draggable="true" ondragstart="drag(event)"> </td>
<td class="pozadie" ondrop="drop(event)" ondragover="allowDrop(event)"> <img src="b_queen.svg" alt="BQ" align= center class="blck" id="drag28" draggable="true" ondragstart="drag(event)"> </td>
<td class="pozadie2" ondrop="drop(event)" ondragover="allowDrop(event)"> <img src="b_king.svg" alt="BKG" align= center class="blck" id="drag29" draggable="true" ondragstart="drag(event)"> </td>
<td class="pozadie" ondrop="drop(event)" ondragover="allowDrop(event)"> <img src="b_bishop.svg" alt="BB" align= center class="blck" id="drag30" draggable="true" ondragstart="drag(event)"> </td>
<td class="pozadie2" ondrop="drop(event)" ondragover="allowDrop(event)"> <img src="b_knight.svg" alt="BK" align= center class="blck" id="drag31" draggable="true" ondragstart="drag(event)"> </td>
<td class="pozadie" ondrop="drop(event)" ondragover="allowDrop(event)"> <img src="b_rook.svg" alt="BR" align= center class="blck" id="drag32" draggable="true" ondragstart="drag(event)"> </td>
<td class="poradie2" height="33" width="12"><b>8</b></td>
</tr>
<!--Black king,queen etc-->
<!--Black pieces-->
<tr>
<td class="poradie" height="33" width="12"><b>7</b></td>
<td class="pozadie" ondrop="drop(event)" ondragover="allowDrop(event)"> <img src="b_pawn.svg" alt="BP" align= center class="blck" id="drag17" draggable="true" ondragstart="drag(event)"> </td>
<td class="pozadie2" ondrop="drop(event)" ondragover="allowDrop(event)"> <img src="b_pawn.svg" alt="BP" align= center class="blck" id="drag18" draggable="true" ondragstart="drag(event)"> </td>
<td class="pozadie" ondrop="drop(event)" ondragover="allowDrop(event)"> <img src="b_pawn.svg" alt="BP" align= center class="blck" id="drag19" draggable="true" ondragstart="drag(event)"> </td>
<td class="pozadie2" ondrop="drop(event)" ondragover="allowDrop(event)"> <img src="b_pawn.svg" alt="BP" align= center class="blck" id="drag20" draggable="true" ondragstart="drag(event)"> </td>
<td class="pozadie" ondrop="drop(event)" ondragover="allowDrop(event)"> <img src="b_pawn.svg" alt="BP" align= center class="blck" id="drag21" draggable="true" ondragstart="drag(event)"> </td>
<td class="pozadie2" ondrop="drop(event)" ondragover="allowDrop(event)"> <img src="b_pawn.svg" alt="BP" align= center class="blck" id="drag22" draggable="true" ondragstart="drag(event)"> </td>
<td class="pozadie" ondrop="drop(event)" ondragover="allowDrop(event)"> <img src="b_pawn.svg" alt="BP" align= center class="blck" id="drag23" draggable="true" ondragstart="drag(event)"> </td>
<td class="pozadie2" ondrop="drop(event)" ondragover="allowDrop(event)"> <img src="b_pawn.svg" alt="BP" align= center class="blck" id="drag24" draggable="true" ondragstart="drag(event)"> </td>
<td class="poradie2" height="35" width="12"><b>7</b></td>
</tr>
<!--Black pieces-->
<!--Empty-->
<tr>
<td class="poradie" height="33" width="12"><b>6</b></td>
<td class="pozadie2" ondrop="drop(event)" ondragover="allowDrop(event)"></td>
<td class="pozadie" ondrop="drop(event)" ondragover="allowDrop(event)"></td>
<td class="pozadie2" ondrop="drop(event)" ondragover="allowDrop(event)"></td>
<td class="pozadie" ondrop="drop(event)" ondragover="allowDrop(event)"></td>
<td class="pozadie2" ondrop="drop(event)" ondragover="allowDrop(event)"></td>
<td class="pozadie" ondrop="drop(event)" ondragover="allowDrop(event)"></td>
<td class="pozadie2" ondrop="drop(event)" ondragover="allowDrop(event)"></td>
<td class="pozadie" ondrop="drop(event)" ondragover="allowDrop(event)"></td>
<td class="poradie2" height="33" width="12"><b>6</b></td>
</tr>
<tr>
<td class="poradie" height="33" width="12"><b>5</b></td>
<td class="pozadie" ondrop="drop(event)" ondragover="allowDrop(event)"></td>
<td class="pozadie2" ondrop="drop(event)" ondragover="allowDrop(event)"></td>
<td class="pozadie" ondrop="drop(event)" ondragover="allowDrop(event)"></td>
<td class="pozadie2" ondrop="drop(event)" ondragover="allowDrop(event)"></td>
<td class="pozadie" ondrop="drop(event)" ondragover="allowDrop(event)"></td>
<td class="pozadie2" ondrop="drop(event)" ondragover="allowDrop(event)"></td>
<td class="pozadie" ondrop="drop(event)" ondragover="allowDrop(event)"></td>
<td class="pozadie2" ondrop="drop(event)" ondragover="allowDrop(event)"></td>
<td class="poradie2" height="33" width="12"><b>5</b></td>
</tr>
<tr>
<td class="poradie" height="33" width="12"><b>4</b></td>
<td class="pozadie2" ondrop="drop(event)" ondragover="allowDrop(event)"></td>
<td class="pozadie" ondrop="drop(event)" ondragover="allowDrop(event)"></td>
<td class="pozadie2" ondrop="drop(event)" ondragover="allowDrop(event)"></td>
<td class="pozadie" ondrop="drop(event)" ondragover="allowDrop(event)"></td>
<td class="pozadie2" ondrop="drop(event)" ondragover="allowDrop(event)"></td>
<td class="pozadie" ondrop="drop(event)" ondragover="allowDrop(event)"></td>
<td class="pozadie2" ondrop="drop(event)" ondragover="allowDrop(event)"></td>
<td class="pozadie" ondrop="drop(event)" ondragover="allowDrop(event)"></td>
<td class="poradie2" height="33" width="12"><b>4</b></td>
</tr>
<tr>
<td class="poradie" height="33" width="12"><b>3</b></td>
<td class="pozadie" ondrop="drop(event)" ondragover="allowDrop(event)"></td>
<td class="pozadie2" ondrop="drop(event)" ondragover="allowDrop(event)"></td>
<td class="pozadie" ondrop="drop(event)" ondragover="allowDrop(event)"></td>
<td class="pozadie2" ondrop="drop(event)" ondragover="allowDrop(event)"></td>
<td class="pozadie" ondrop="drop(event)" ondragover="allowDrop(event)"></td>
<td class="pozadie2" ondrop="drop(event)" ondragover="allowDrop(event)"></td>
<td class="pozadie" ondrop="drop(event)" ondragover="allowDrop(event)"></td>
<td class="pozadie2" ondrop="drop(event)" ondragover="allowDrop(event)"></td>
<td class="poradie2" height="33" width="12"><b>3</b></td>
</tr>
<!--Empty-->
<!--White pieces-->
<tr>
<td class="poradie" height="33" width="12"><b>2</b></td>
<td class="pozadie2" ondrop="drop(event)" ondragover="allowDrop(event)"> <img src="w_pawn.svg" alt="WP" align= center class="wht" id="drag9" draggable="true" ondragstart="drag(event)"> </td>
<td class="pozadie" ondrop="drop(event)" ondragover="allowDrop(event)"> <img src="w_pawn.svg" alt="WP" align= center class="wht" id="drag10" draggable="true" ondragstart="drag(event)"> </td>
<td class="pozadie2" ondrop="drop(event)" ondragover="allowDrop(event)"> <img src="w_pawn.svg" alt="WP" align= center class="wht" id="drag11" draggable="true" ondragstart="drag(event)"> </td>
<td class="pozadie" ondrop="drop(event)" ondragover="allowDrop(event)"> <img src="w_pawn.svg" alt="WP" align= center class="wht" id="drag12" draggable="true" ondragstart="drag(event)"> </td>
<td class="pozadie2" ondrop="drop(event)" ondragover="allowDrop(event)"> <img src="w_pawn.svg" alt="WP" align= center class="wht" id="drag13" draggable="true" ondragstart="drag(event)"> </td>
<td class="pozadie" ondrop="drop(event)" ondragover="allowDrop(event)"> <img src="w_pawn.svg" alt="WP" align= center class="wht" id="drag14" draggable="true" ondragstart="drag(event)"> </td>
<td class="pozadie2" ondrop="drop(event)" ondragover="allowDrop(event)"> <img src="w_pawn.svg" alt="WP" align= center class="wht" id="drag15" draggable="true" ondragstart="drag(event)"> </td>
<td class="pozadie" ondrop="drop(event)" ondragover="allowDrop(event)"> <img src="w_pawn.svg" alt="WP" align= center class="wht" id="drag16" draggable="true" ondragstart="drag(event)"> </td>
<td class="poradie2" height="33" width="12"><b>2</b></td>
</tr>
<!--White pieces-->
<!--Boxes for white pieces-->
<tr>
<td class="poradie" height="33" width="12"><b>1<b/></td>
<td class="pozadie" ondrop="drop(event)" ondragover="allowDrop(event)"> <img src="w_rook.svg" alt="WR" align= center class="wht" id="drag1" draggable="true" ondragstart="drag(event)"> </td>
<td class="pozadie2" ondrop="drop(event)" ondragover="allowDrop(event)"> <img src="w_knight.svg" alt="WK" align= center class="wht" id="drag2" draggable="true" ondragstart="drag(event)"> </td>
<td class="pozadie" ondrop="drop(event)" ondragover="allowDrop(event)"> <img src="w_bishop.svg" alt="WB" align= center class="wht" id="drag3" draggable="true" ondragstart="drag(event)"> </td>
<td class="pozadie2" ondrop="drop(event)" ondragover="allowDrop(event)"> <img src="w_queen.svg" alt="WQ" align= center class="wht" id="drag4" draggable="true" ondragstart="drag(event)"> </td>
<td class="pozadie" ondrop="drop(event)" ondragover="allowDrop(event)"> <img src="w_king.svg" alt="WKG" align= center class="wht" id="drag5" draggable="true" ondragstart="drag(event)"> </td>
<td class="pozadie2" ondrop="drop(event)" ondragover="allowDrop(event)"> <img src="w_bishop.svg" alt="WB" align= center class="wht" id="drag6" draggable="true" ondragstart="drag(event)"> </td>
<td class="pozadie" ondrop="drop(event)" ondragover="allowDrop(event)"> <img src="w_knight.svg" alt="WK" align= center class="wht" id="drag7" draggable="true" ondragstart="drag(event)"> </td>
<td class="pozadie2" ondrop="drop(event)" ondragover="allowDrop(event)"> <img src="w_rook.svg" alt="WR" align= center class="wht" id="drag8" draggable="true" ondragstart="drag(event)" > </td>
<td class="poradie2" height="33" width="12"><b>1</b></td>
</tr>
<!--Figures added-->
<tr>
<td class="poradie" height="12" width="12"></td>
<td class="poradie" height="12" width="12"><b>a<b/></td>
<td class="poradie" height="12" width="12"><b>b<b/></td>
<td class="poradie" height="12" width="12"><b>c<b/></td>
<td class="poradie" height="12" width="12"><b>d<b/></td>
<td class="poradie" height="12" width="12"><b>e<b/></td>
<td class="poradie" height="12" width="12"><b>f<b/></td>
<td class="poradie" height="12" width="12"><b>g<b/></td>
<td class="poradie" height="12" width="12"><b>h</b></td>
<td class="poradie" height="12" width="12"></td>
</table>
</body>
</html>
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
var el = document.getElementById("drag");
el.addEventListener("touchstart", handleStart, false)
el.addEventListener("touched", handleEnd, false)
el.addEventListener("touchcancel", handleCancel, false)
el.addEventListener("touchleave", handleEnd, false)
el.addEventListener("touchmove", handleMove, false)
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
function handleStart(event) {
}
解决方案
推荐阅读
- docker - 如果我使用绑定挂载，为什么我还需要在我的 Dockerfile 中执行 COPY？
- python - Python - 从 2 个集合中查找最接近的索引
- react-native - React native material dropdown - 如何根据下拉值呈现文本
- javascript - 如何为我的 html 表单制作验证器？
- java - 通过 PrintWriter 发布动态 HTML 表单 out.print(HTML Form) 有时不起作用
- flask-sqlalchemy - 如何在不属于我的 SQLAlchemy 模型的 Flask-Marshmallow 中添加自定义字段
- javascript - 在 React 顶级组件中分离状态相关函数
- node.js - 无法在 Hasura 中获得突变
- c# - C# Avro json 读取得到算术运算导致溢出
- angular - 使用导航无限渲染组件