Witam na wstępie chciałem zaznaczyć że jestem na początku drogi programowania.Mam taki problem gdyż wykonałem obrazek w adobe illustrator , jest to prosty rysunek: duży kwadrat a w nim jeszcze dwa kwadraty mniejsze.Ogółem chce na ten obrazek stworzony w adobe illustrator przerzucić inny obrazek.Tzn działa mi niby to przerzucanie ,ale jak wykonuje przerzucanie to automatycznie znika mi ten obrazek który chce przerzucić.Inna sprawa że nie wiem jeszcze jak za bardzo odnosić się do obrazka stworzonego w adobe, dlatego stworzyłem 3 warstwy mysląc że będę się do nich odnosił np jak do div(przerzucając kolorowo.svg na jeden z mniejszych kwadratów czyli layer 2 albo 3. Bardzo proszę o pomoc.
<!DOCTYPE HTML>
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));
}
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="612px"
height="792px" viewBox="0 0 612 792" enable-background="new 0 0 612 792" xml:space="preserve">
<g id="Layer_1">
<path fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" d="M508.108,645.784c0,6.628-5.373,12-12,12H116.054
c-6.627,0-12-5.372-12-12v-435.46c0-6.627,5.373-12,12-12h380.054c6.627,0,12,5.373,12,12V645.784z"/>
</g>
<g id="Layer_2" ondrop="drop(event)" ondragover="allowDrop(event)">
<path fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" d="M336.486,422.811c0,6.627-5.373,12-12,12H189.027
c-6.627,0-12-5.373-12-12V298.162c0-6.627,5.373-12,12-12h135.459c6.627,0,12,5.373,12,12V422.811z"/>
</g>
<g id="Layer_3">
<path fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" d="M471.622,620.108c0,6.628-5.373,12-12,12H309.297
c-6.627,0-12-5.372-12-12v-82.757c0-6.627,5.373-12,12-12h150.325c6.627,0,12,5.373,12,12V620.108z"/>
</g>
</svg>
<img id="drag1" src="kolorowo.svg" draggable="true" ondragstart="drag(event)" width="336" height="69">