Ho una lista di testo html in un formato ul li che voglio rilasciare su un'immagine SVG. Ma c'è qualche problema quando sto facendo così.
Il mio codice html ha strutturato qualcosa del genere:
<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>
Voglio trascinare questo testo di Lorum Ipsum su un tag immagine che è annidato nel tag svg.
Come posso risolvere questo problema? Inoltre abbiamo bisogno di un testo nel tag html.
risposte:
0 per risposta № 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>