在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

<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-跨浏览器HTML5拖放

2-使用HTML5原生拖放API

3- HTML 5拖放API

更新:

由于IE有点棘手，让SVG可拖拽工作，我更新了这篇文章与另一个解决方案，从IE8+和触摸屏工作。其中一个轻量级库是interactive .js。这是解决方案https://jsfiddle.net/mhadaily/pkewdttr/，你可以看到它在IE8+和其他浏览器上运行得非常流畅。请检查interactjs。IO网站获取更多文档。

如果你需要更多的帮助，请问我。