在IE和Edge上拖动svg元素的sprite

Question

有没有办法在IE/Edge中显示svg元素的拖动精灵？

例:

这个可以毫无问题地拖动

<img draggable="true" src="file.jpg" />

这个没有显示拖动精灵

<img draggable="true" src="file.svg" />

演示:http: //codepen.io/akotb/pen/WGNOXv

如果您拖动的div具有使用svg符号的直接​​(或间接)子级,则它也不起作用

<div draggable="true"> <svg><use xlink:href="#circle" /></svg></div>

同样用该示例更新了演示

Answer 1

我给你的建议可以使你的 SVG 正常工作，但我建议你也阅读以下文档：

\n\n

假设这是您的 HTML 部分

\n\n

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>\n\n<img id="drag1" src="http://demosthenes.info/assets/images/thumbnails/homer-simpson.svg" draggable="true"\nondragstart="drag(event)" width="336" height="69">\n

\n\n

这是你的 CSS 样式

\n\n

img {\n  width: 150px;\n  height: 150px;\n}\n\n#div1, #div2 {\n    float: left;\n    width: 100px;\n    height: 35px;\n    margin: 10px;\n    padding: 10px;\n    border: 1px solid black;\n}\n

\n\n

我们还可以添加一些 Javascript 代码，以便更容易处理跨浏览器兼容性

\n\n

function allowDrop(ev) {\n    ev.preventDefault();\n}\n\nfunction drag(ev) {\n    ev.dataTransfer.setData("text", ev.target.id);\n}\n\nfunction drop(ev) {\n    ev.preventDefault();\n    var data = ev.dataTransfer.getData("text");\n    ev.target.appendChild(document.getElementById(data));\n}\n

\n\n

我们一起可以做到http://codepen.io/mhadaily/pen/QKjgAo

\n\n

更多文件：

\n\n

1-跨浏览器 HTML5 拖放

\n\n

2-使用 HTML5\xe2\x80\x99s 本机拖放 API

\n\n

3- HTML 5 拖放 API

\n\n

更新：

\n\n

\n

由于 IE 让它与 SVG 可拖动一起使用有点棘手，所以我用另一个适用于 IE8+ 和触摸屏的解决方案更新了这篇文章。Interactive.js 是可以提供帮助的轻量级库之一。这是解决方案https://jsfiddle.net/mhadaily/pkewdttr/，您可以看到它在 IE8+ 和其他浏览器中运行得非常流畅。请查看 interactjs.io 网站以获取更多文档。

\n

\n\n

如果您需要更多帮助，请询问我。

\n