is there way show drag sprite svg elements in ie/edge ?
example:
this 1 can dragged without problems
<img draggable="true" src="file.jpg" /> this 1 doesn't show drag sprite
<img draggable="true" src="file.svg" /> demo: http://codepen.io/akotb/pen/wgnoxv
also doesn't work if div dragging has direct (or indirect) child use svg symbols
<div draggable="true"> <svg><use xlink:href="#circle" /></svg></div> updated demo example well
i giving advice makes svg works, recommend read following documents well:
let's assume 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 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 javascript code makes bit easier handle 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 can make http://codepen.io/mhadaily/pen/qkjgao
more documents :
1- cross browser html5 drag , drop
2- using html5’s native drag , drop api
update:
since ie bit tricky work svg draggable update post solution works ie8+ , touch-screens. 1 of light libraries interact.js. solution https://jsfiddle.net/mhadaily/pkewdttr/ , can see works in ie8+ , other browsers smooth. please check interactjs.io website more documentation.
if need more please ask me.
Comments
Post a Comment