如何解决拖放但用内联 svg 替换 <img>
我想用内联 SVG 替换我的图像并让我的代码工作。我有一个简单的拖放小部件，带有一个拖放表和一个拖放表（它实际上是一个拖放复制，这正是我想要的）。我有两个图像具有本地 .svg 文件，draggable 设置为 true。我想让 .svg 代码是内联的，这样我就可以操纵 svg。每次我尝试用 <img> 替换 <svg> 时，代码都会中断。
这是我的代码 https://jsfiddle.net/jado66/rt5smfvz/9/：
<!DOCTYPE html>
<html>
<head>
<title>Drag Drop SVG</title>
</head>
<style>
* {user-select: none; }
.cell {width:50px;height:50px;
}
img {width:50px;height:50px;cursor: move;}
table td #dropTable td:hover{background: #dedede;}
#dropTable {
border-spacing: 5px;
border: 1px solid #dedede;
}
.droppable:hover{
transform: scale(1.05);
transition-duration: 0.3s;
}
#dropTable tbody { height:300px; overflow-y:auto; }
</style>
<body>
<!-- Drag Table -->
<!-- <svg width="50" height="50"> //***!!!!***!!! I want to replace both <img> with inline <svg> and have my code work ***!!!!***!!!
<rect x="0" y="0" width="50" height="50" style="fill:white;stroke:black;stroke-width:6" />
</svg> -->
<table style="border-spacing: 5px;">
<tr>
<td id="svg1">
<div class = "cell" ondrop="drop(event)" ondragover="allowDrop(event)">
<img class = "droppable newGate" src="droppable newGate" src="https://picsum.photos/500/500?random=1"
ondragstart="dragStart(event)" id="1" draggable="true"/> </div>
</td>
<td id="svg2">
<div class = "cell " ondrop="drop(event)" ondragover="allowDrop(event)">
<img class = "droppable newGate" src="https://picsum.photos/500/500?random=2"
ondragstart="dragStart(event)" id="2" draggable="true" /> </div>
</td>
</tr>
</table>
<hr>
<!-- Drop Table -->
<table>
<tr>
<td>
<table id="dropTable" >
<tr >
<td> <div class = "cell"></div></td>
<td> <div class = "cell" ></div></td>
<td> <div class = "cell" ></div></td>
<td> <div class = "cell" ></div></td>
</tr>
<tr>
<td> <div class = "cell" ></div></td>
<td> <div class = "cell" ></div></td>
<td> <div class = "cell" ></div></td>
<td> <div class = "cell" ></div></td>
</tr>
</table>
</td>
</tr>
</table>
<script>
const cells = document.querySelectorAll(".cell:empty"); //We only want to add event listeners to empty cells
for (const cell of cells){
cell.addEventListener('dragover',allowDrop);
cell.addEventListener('drop',drop);
}
function dragStart(evt)
{
evt.dataTransfer.setData("Text",evt.target.id);
}
function drop(evt)
{
var data = evt.dataTransfer.getData("Text");
var nodecopy = document.getElementById(data).cloneNode(true);
nodecopy.id = Date.Now(); /* We cannot use the same ID */
evt.target.appendChild(nodecopy);
}
function allowDrop(ob)
{
ob.preventDefault();
}
</script>
</body>
</html>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
