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 draggable有点棘手，我用另一个解决方案更新了这篇文章，该解决方案适用于IE8 +以及触摸屏。可以提供帮助的轻型库之一是interact.js。这是解决方案https://jsfiddle.net/mhadaily/pkewdttr/，您可以看到它在IE8 +和其他浏览器中非常流畅。请查看interactjs.io网站以获取更多文档。

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

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

1 个答案: