Przeciągnij ikonkę dla elementów svg na IE i Edge

Question

Czy istnieje sposób na pokazanie ikonki przeciągania dla elementów svg w IE/Edge?

przykład:

Ten można przesuwać bez problemów

<img draggable="true" src="file.jpg" /> 

ten nie wykazuje ikonki przeciągania

<img draggable="true" src="file.svg" /> 

Demo: http://codepen.io/akotb/pen/WGNOXv

Również nie działa, jeśli element div jest draggin g ma bezpośredni (lub pośredni) dziecko, które używają symboli svg

<div draggable="true"> <svg><use xlink:href="#circle" /></svg></div> 

aktualizowane demo z tego przykładu oraz

Answer 1

daję wam poradę co sprawia, że ​​prace SVG, jednak polecam również przeczytać następujące dokumenty, a także:

Przyjmijmy to Twoja część 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"> 

to wasze style CSS

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

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

możemy dodać kod Javascript, a także sprawia, że ​​nieco łatwiejsze w obsłudze dla kompatybilności z różnymi przeglądarkami

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

razem możemy uczynić ten http://codepen.io/mhadaily/pen/QKjgAo

więcej dokumentów:

1- Cross Browser HTML5 Drag and Drop

2- Using HTML5’s Native Drag and Drop API

3- HTML 5 drag and drop API

Aktualizacja:

Ponieważ IE jest nieco skomplikowany, aby dostać się, że do pracy z SVG przeciągany aktualizować ten post z innego rozwiązania, które działa z IE8 +, a także ekranów dotykowych. Jedną z łatwych bibliotek, które mogą pomóc to .js. To jest rozwiązanie https://jsfiddle.net/mhadaily/pkewdttr/ i widać, że działa w IE8 + i innych przeglądarkach bardzo płynnie. Sprawdź stronę internetową interactjs.io, aby uzyskać więcej dokumentacji.

Jeśli potrzebujesz dodatkowej pomocy, zapytaj mnie.