Is there a way to show the drag sprite for svg elements in IE/Edge ?
Example:
This one can be dragged without problems
<img draggable="true" src="file.jpg" />
This one doesn't show the drag sprite
<img draggable="true" src="file.svg" />
Demo: http://codepen.io/akotb/pen/WGNOXv
Also it doesn't work if the div you are dragging has a direct (or indirect) child that use svg symbols
<div draggable="true"> <svg><use xlink:href="#circle" /></svg></div>
updated the demo with that example as well
If you want to reference a whole SVG file, SVG 2 (when implemented in browsers) will allow to reference another SVG file without any fragment identifier: New in SVG 2: An href without a fragment allows an entire SVG document to be referenced without having to ensure that it has an ID on its root element.
The <use> element takes nodes from within the SVG document, and duplicates them somewhere else.
I am giving you an advice which makes your SVG works, however I recommend you also read the following documents as well:
Let's assume this is your HTML part
<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">
this is your CSS styles
img {
width: 150px;
height: 150px;
}
#div1, #div2 {
float: left;
width: 100px;
height: 35px;
margin: 10px;
padding: 10px;
border: 1px solid black;
}
we may add some Javascript code as well that makes a bit easier to handle for cross-browser compatibility
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));
}
together we can make this http://codepen.io/mhadaily/pen/QKjgAo
More documents :
1- Cross Browser HTML5 Drag and Drop
2- Using HTML5’s Native Drag and Drop API
3- HTML 5 drag and drop API
Update:
Since IE is a bit tricky to get that to work with SVG draggable I update this post with another solution which works from IE8+ and also touch-screens. One of the light libraries that could help is interact.js. This is solution https://jsfiddle.net/mhadaily/pkewdttr/ and you can see it works in IE8+ and other browsers very smooth. Please check interactjs.io website to more documentation.
If you need more help please ask me.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With