Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Drag sprite for svg elements on IE and Edge

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

like image 784
Ahmed Kotb Avatar asked Sep 02 '16 00:09

Ahmed Kotb


People also ask

How do you reference an SVG?

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.

What is use Tag SVG?

The <use> element takes nodes from within the SVG document, and duplicates them somewhere else.


1 Answers

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.

like image 163
Majid Avatar answered Sep 28 '22 07:09

Majid