HTML 5 SVG par glisser-déposer

voix
0

Je veux glisser une image dans un cercle SVG. Alors que l' image de débogage est disponible comme un enfant mais il ne montre pas le cercle. Quand je glisser la même image dans un <div>élément , il fonctionne très bien , mais pas pour <SVG>ou <Image>étiquette. Avec <div>cela fonctionne très bien , mais pas avec <IMAGE>.

Q. Dessiner un cercle de couleur jaune et vert en utilisant SVG et permettent aux utilisateurs de glisser-déposer un logo dans les cercles.

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

Créé 19/09/2018 à 12:58
source utilisateur
Dans d'autres langues...                            


1 réponses

voix
0

Vous ne pouvez pas utiliser les événements de glisser dans SVGs mais il y a un truc. Vous pouvez avoir deux sections (une superposant l'autre) en définissant la propriété z-index sur l'une des sections. Jetez un oeil à un code ci-dessous:

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

dans votre code 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>

et votre script:

    <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>

J'espère que cela aide :)

Créé 13/12/2018 à 10:02
source utilisateur

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