在 IE 和 Edge 上拖动 svg 元素的精灵

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 工作，但我建议你也阅读以下文档：

假设这是你的 HTML 部分

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

<img id="drag1" src="http://demosthenes.info/assets/images/thumbnails/homer-simpson.svg" draggable="true"
ondragstart="drag(event)" width="336" height="69">

这是你的 CSS 样式

img {
  width: 150px;
  height: 150px;
}

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

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

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));
}

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

更多文档：

1-Cross Browser HTML5 Drag and Drop

2-Using HTML5’s Native Drag and Drop API

3-HTML 5 drag and drop API

更新：

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

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