Eu tenho uma lista de texto html em um formato ul li que eu quero soltar em uma imagem svg. Mas há algum problema quando estou fazendo assim.
Meu código html estruturou algo como isto:
<html>
<body>
<ul>
<li>Lorum Ipsum </li>
<li>Lorum Ipsum 2</li>
<li><img src="/images/..." /></li>
</ul>
<svg><image .../> <rect>...</rect> <circle>....</circle> </svg>
</body>
</html>
Eu quero arrastar este texto Lorum Ipsum em uma marca de imagem que está aninhada na marca svg.
Como posso resolver esse problema? Também precisamos de um texto na tag html.
Respostas:
0 para resposta № 1<ul><li id="drag1" draggable="true" ondragstart="drag(event)">Lorum Ipsum</li></ul>
<svg ><image id="div1" ondrop="drop(event)"
ondragover="allowDrop(event)"/> <rect>...</rect> <circle>....</circle> </svg>
<script>
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("Text", ev.target.id);
}
function drop(ev) {
debugger;
ev.preventDefault();
var data = ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>