个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
28
4
我正在尝试将 拖放 Logo 到 2 个 SVG 圆圈 中。在我的代码的帮助下，图像被拖到一个圆圈中，但没有被拖到另一个圆圈中。
如何修改code这样图像可以在两个圆圈之间拖/放？
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function allow(ev){
ev.preventDefault();
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
var img1=document.getElementById(data),
imgSrc=img1.getAttribute('src'),
imgw=img1.getAttribute('width')
imgh=img1.getAttribute('height'),
imgX = ev.target.getAttribute('cx') - ev.target.getAttribute('r')+20;
console.log(imgX);
ev.target.parentElement.innerHTML += '<image xlink:href="' + imgSrc + '" x="' + imgX + '" y="0" width="' + imgw + 'px" height="' + imgh + 'px"/>';
img1.parentNode.removeChild(img1);
//ev.target.appendChild(document.getElementById(data));
}<!DOCTYPE html>
<html>
<head>
<title>Assignment1_HTML_L2</title>
</head>
<body>
<div id="circle" ondrop="drop(event)" ondragover="allow(event)" >
<svg width="1000" height="200">
<circle id="c1" cx="70" cy="50" r="50" stroke="green" fill="white" stroke-width="4" style="opacity: 1;" />
<circle cx="200" cy="50" r="50" stroke="yellow" fill="white" stroke-width="4" style="opacity: 1;"/>
</svg>
</div>
<image id="p1" src="https://media.giphy.com/media/l3vR16pONsV8cKkWk/giphy.gif" alt="picture" draggable="true" ondragstart="drag(event)" width="30" height="30" style="opacity: 1;">
</body>
</html>更新:
在回答部分贴出了SVG文件的链接!!
最佳答案
HTML draggable/ondragstart等都是HTML属性。它们在 SVG 中不起作用。因此，您需要使用标准鼠标事件来实现拖动。
参见:Drag and drop events in embedded SVG?
关于 S.O. 还有很多其他问题。与在 SVG 中实现拖动有关。
关于javascript - 将一张图片拖放到 2 个 `svg` 圆圈内(来回)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58870029/
28
4
0
我正在编写两个程序，一个用 C++ 编写，另一个用 Python 编写，以使用 unix 域套接字相互通信。我想做的是让 C++ 代码向 Python 代码发送一个数字，Python 代码又将另一个数
我希望有一个生成器函数，它返回一条线上的点，给定一个最小距离 k。这很简单，可以使用 numpy 完成，如下所示: points = np.linspace(start, end, k) 但是，我想生
根据我的理解，我们一直在用 Git 做一个非常标准的分支模型的项目，描述如下:http://nvie.com/posts/a-successful-git-branching-model/ 我们从“m
我有一张图片，我想单击它以动画形式旋转 90 度，当它再次单击时我希望它以动画形式旋转 -90 度。 对于使用 css3 变换的旋转 im: -moz-transform:rotate(90deg);
我正在尝试将 拖放 Logo 到 2 个 SVG 圆圈 中。在我的代码的帮助下，图像被拖到一个圆圈中，但没有被拖到另一个圆圈中。 如何修改code这样图像可以在两个圆圈之间拖/放？ function
我正在使用 python 3.5.2、pandas 0.18.1 和 sqlite3。 在我的数据库中，我有一个列 unix_time 和 INT 自 1970 年以来的秒数。理想情况下我想从 sql
我已经在我的服务器上安装了 SSL。我的问题是如何通过 acegi 插件在选定的 Controller /页面上强制使用 https。 Acegi 插件支持一个属性 forcehttps，当设置为 t
这是我第一次发布查询。我需要帮助。感谢您的帮助。 我同意我已经把我的概率作为一个长篇故事。但很抱歉，我不知道如何缩短它，我的目的是提供有关我的问题的完整信息。 问题:我必须在 Windows 平台上使
我是一名优秀的程序员,十分优秀！