0

SVG 画像にドロップしたい ul li 形式の html テキスト リストがあります。しかし、私がこのようにやっていると、いくつかの問題が発生しました。

私の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 に答える