HTML 5 SVG Con arrastrar y soltar

votos
0

Quiero Arrastre una imagen en un círculo SVG. Mientras se depura imagen está disponible como un niño, pero no se muestra en el círculo. Cuando arrastrando la misma imagen en un <div>elemento que está funcionando bien pero no para <SVG>o <Image>etiqueta. Con <div>que está funcionando bien pero no con <IMAGE>.

Q. Dibuje un círculo de color amarillo y verde utilizando SVG y permiten a los usuarios arrastrar y colocar un logotipo en los círculos.

https://www.w3schools.com/code/tryit.asp?filename=FVF69MCUNTQ0

Publicado el 19/09/2018 a las 12:58
fuente por usuario
En otros idiomas...                            


1 respuestas

votos
0

No se puede utilizar en los eventos de arrastre IVS, pero hay un truco. Puede tener dos secciones (una superposición de la otra) estableciendo la propiedad z-index en una de las secciones. Echar un vistazo a código de abajo:

CSS:

        #container{
            text-align: center;
            margin: -20px 20% 0 20%;
            background: #b9cae5;
        }
        #SVGs{
            width:100px;
            height:100px;
            margin: 20px 0 0 350px;
            position:relative;

        }
        .sec1,.sec2{
            width:100px;
            height:100px;
            position:absolute;
            top:0;
            left:0;
        }
        .sec1{
            z-index:10;
        }

en el código HTML:

<section id ="container">
    <section id="SVGs">

            <section class="sec2">
            <svg width="100" height="100">

                <circle id="abc" cx="50" cy="50" r="50" stroke="black" fill="yellow">
                </circle>
            </svg>
            </section>
            <section id="sec1"class="sec1" ondrop="drop(event)" ondragover="allowDrop(event)">
            </section>

       <br/><br/>
       </section>
       <section>
               <p> <strong>Drag the gif image to the SVG circles above.</strong>
       </p>
       <img id="drg1" alt="Check Internet Connection"src="https://media.giphy.com/media/l3vR16pONsV8cKkWk/giphy.gif" draggable="true" ondragstart="drag(event)" width="100" height="100"/>

       </section>

y la secuencia de comandos:

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

            }
            </script>

Espero que ayude :)

Respondida el 13/12/2018 a las 10:02
fuente por usuario

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more