Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [XML][JavaScript][HTML]Drag and drop i SVG
Forum PHP.pl > Forum > Przedszkole
Darek1992
29.02.2016, 13:42:50
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.
[HTML] pobierz, plaintext 
  1.  <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <style>
  5.  
  6. </style>
  7. <script >
  8. function allowDrop(ev) {
  9.     ev.preventDefault();
  10. }
  11.  
  12. function drag(ev) {
  13.     ev.dataTransfer.setData("text", ev.target.id);
  14. }
  15.  
  16. function drop(ev) {
  17.     ev.preventDefault();
  18.     var data = ev.dataTransfer.getData("text");
  19.     ev.target.appendChild(document.getElementById(data));
  20. }
  21. </script>
  22. </head>
  23. <body>
  24.  
  25. <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"
  26. 	 height="792px" viewBox="0 0 612 792" enable-background="new 0 0 612 792" xml:space="preserve">
  27.  
  28. <g id="Layer_1">
  29. 	<path fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" d="M508.108,645.784c0,6.628-5.373,12-12,12H116.054
  30. 		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"/>
  31. </g>
  32. <g id="Layer_2" ondrop="drop(event)" ondragover="allowDrop(event)"> 
  33. 	<path fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" d="M336.486,422.811c0,6.627-5.373,12-12,12H189.027
  34. 		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"/>
  35. </g>
  36. <g id="Layer_3">
  37. 	<path fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" d="M471.622,620.108c0,6.628-5.373,12-12,12H309.297
  38. 		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"/>
  39. </g>
  40.  
  41. </svg>
  42.  
  43. <img id="drag1" src="kolorowo.svg" draggable="true" ondragstart="drag(event)" width="336" height="69">
  44.  
  45. </body>
  46. </html>
[HTML] pobierz, plaintext
nospor
29.02.2016, 13:48:45
Uzywaj prosze poprawnie BBCODE. Popraw prosze swoj post.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.