Question

我已经使用SVG和图像创建了两个圆圈。我正在尝试将图像拖动到圈子中，虽然在删除图像后可以这样做，但它不可见。如何将其放在圈子的顶部。

<!DOCTYPE html>
<html>
<body>
<div id="circle" >
<svg id="dest" ondrop="drop(event)" ondragover="allowDrop(event)" width="250" height="100">
<circle id="yelcirc" cx="50" cy="50" r="50" fill="yellow" />
<circle id="greencirc" cx="160" cy="50" r="50" fill="green" />
</svg>
</div>
<img id="draglogo" src="logo.gif" draggable="true" ondragstart="drag(event)" class="draggable"  ondragend="" width="105" height="73">
</body>
<script>
    function allowDrop(ev) {
         ev.preventDefault();
    }
    function drag(ev) {
         ev.dataTransfer.setData("text", ev.target.id);
    }
    function drop(ev) {
         ev.preventDefault();
         var data = ev.dataTransfer.getData("text");
         ev.target.appendChild(document.getElementById(data));
    }
</script>
</html>

Answer 1

显然，ondrop标签上未检测到ondragover和svg事件。最重要的是，SVG中的图像语法与常规HTML中的语法不同。

这是一个简单的示例，说明如何实现所需的基本操作，当然需要进行一些调整，图像的位置，图像的大小等。因此，基本上我在这里所做的就是原始图像属性以创建SVG图像。您也可以将常规图像放置在SVG标签外部，但是我不确定放置此类图像会更容易。

您还可以阅读this answer，以了解如何在SVG元素上模拟拖动事件

注意：这仅适用于第一次拖动，即使图像在移动后仍可拖动，该函数也会由于从DOM中选择img的方式而被抛出错误，该图像已被删除，因此不再找到img标签。

<!DOCTYPE html>
<html>
<body>
<div id="circle" ondrop="drop(event)" ondragover="allowDrop(event)" >
<svg id="dest" width="250" height="100">
<circle id="yelcirc" cx="50" cy="50" r="50" fill="yellow"  />
<circle id="greencirc" cx="160" cy="50" r="50" fill="green" />
</svg>
</div>
<img id="draglogo" src="https://placeimg.com/105/73/any" draggable="true" ondragstart="drag(event)" class="draggable"  ondragend="" width="105" height="73">
</body>
<script>
    function allowDrop(ev) {
         ev.preventDefault();
    }
    function drag(ev) {
         ev.dataTransfer.setData("text", ev.target.id);
    }
    function drop(ev) {
         ev.preventDefault();
         var data = ev.dataTransfer.getData("text"),
             img = document.getElementById(data),
             imgSrc = img.getAttribute('src'),
             imgW = img.getAttribute('width'),
             imgH = img.getAttribute('height'),
             //for example you can calculate X position from event circle
             imgX = ev.target.getAttribute('cx') - ev.target.getAttribute('r');

         ev.target.parentElement.innerHTML += '<image xlink:href="' + imgSrc + '" x="' + imgX + '" y="0" width="' + imgW + 'px" height="' + imgH + 'px"/>';
         img.parentNode.removeChild(img);
    }
</script>
</html>

将图像拖放到SVG元素顶部

1 个答案: