Question

我有一个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标签中的文字。

Answer 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>

拖动html文本，并将该文本放在svg图像上

1 个答案: