0

我有一个 ul li 格式的 html 文本列表，我想将其放在 svg 图像上。但是当我这样做时出现了一些问题。

我的 html 代码结构如下：

<html>
<body>
    <ul>
        <li>Lorum Ipsum </li>
        <li>Lorum Ipsum 2</li>
        <li><img src="..." /></li>
    </ul>

    <svg><image .../> <rect>...</rect> <circle>....</circle> </svg>

</body>
</html>

我想将这个 Lorum Ipsum 文本拖到嵌套在 svg 标签中的图像标签上。

我该如何解决这个问题？我们还需要 html 标签中的文本。

4

1 回答 1

0 
<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>
于 2012-09-17T14:15:50.720 回答