Drag en Drop

Status
Niet open voor verdere reacties.
jimowns

jimowns

Gebruiker
Lid geworden
2 sep 2006
Berichten
341
Beste forumleden,

ik ben bezig met een kleine website, zodat ik zowat alles onder de knie krijg.

Maar zit eventjes met een probleempje met Drag en Drop.

Ik heb 2 foto's, foto: frietjes en foto: piza

wanneer ik mijn foto versleep naar de ' ondrop ' krijg ik altijd dat het fout gedropt is.
Ben er al een tijdje me aan het prutsen, maar ik krijg het niet gefixt.

Kan iemand mij a.u.b mee helpen ;).
Code:
CSS:
Code: 
   #div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
  #div2 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}

code:
HTML:
Code: 
<!DOCTYPE html>
<html>

<head>
<title> Website Jim </title>
<link rel="stylesheet" type="text/css" href="tags.css"/>

 
<script type="text/javascript">
function allowDrop(ev)
{
    ev.preventDefault();
}

function frieten(ev)
{
    ev.dataTransfer.setData("Text",ev.target.id);
    return 'friet';
}

function piza(ev)
{
    ev.dataTransfer.setData("Text",ev.target.id);
    return 'piza';
}

function landBelgie(ev)
{
    var data=ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
    ev.preventDefault();
    if(ev == 'friet')
    {
        alert("Goed gedaan!");
    }
    else
    {
        alert("probeer nog een keer");
    }
}

function landFrankrijk(ev)
{
    var data=ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
    ev.preventDefault();
    if(ev == 'piza')
    {
        alert("Goed gedaan!");
    }
    else
    {
        alert("probeer nog een keer");
    }
}
</script>


</head>

<body>

<div class="mid">

<p>Drag the W3Schools image into the rectangle:</p>

<div id="div1" ondrop="landBelgie(event)" ondragover="allowDrop(event)" ondragstart="frieten(event)"></div>  <!-- frieten -->
<br />
<div id="div2" ondrop="landFrankrijk(event)" ondragover="allowDrop(event)" ondragstart="piza(event)"></div> <!-- Piza -->
<br />


<img id="drag1" src="img/frieten.jpg" draggable="true" ondragstart="frieten(event)" width="336" height="69" ondrop="landBelgie(event)"/>

<img id="drag2" src="img/piza.jpg" draggable="true" ondragstart="piza(event)" width="336" height="69" ondrop="landFrankrijk(event)"/>
    
    
</div>

<div class="footer">
	    © 2012 - 2013  Jim
</div>

</body>

</html>


Met vriendelijke groetjes, Jim
 
Laatst bewerkt:
Hoi Jim,

In je functie frieten schrijf je return 'friet';. Daar heb je niets aan, omdat je later in de onDrop-handler (landFrankrijk of landBelgie) deze string ook weer nodig hebt. Je kunt 'm beter, net als ev.target.id, opslaan in het ev.dataTransfer object:
[JS]ev.dataTransfer.setData("value", "friet");[/JS]

In landBelgie heb je dit: if(ev == 'piza'), terwijl ev het event-object is. Je wil natuurlijk de waarde die je hebt opgeslagen weer ophalen ;)
[JS]var value = ev.dataTransfer.getData("value");
if (value == "friet") //...[/JS]

Succes!
 
Dankuwel voor je snelle reactie ;).

ik heb gedaan wat je hebt gezegt, maar hij neemt het niet aan.
 
Wie is 'hij'? (Welke browser gebruik je? :P) Is de cache leeg? Als je de nieuwe code post zal ik het ook nog eens voor je testen ;)
 
Sorry voor mijn raare reactie :p. ik gebruik altijd browser 'Chrome' ;)

Ikzelf ben ook niet echt zeker dat mijn tags wel juist zijn.

Code:
Code: 
<!DOCTYPE html>
<html>

<head>
<title> Website Jim </title>

<script type="text/javascript">
function allowDrop(ev)
{
    ev.preventDefault();
}

function frieten(ev)
{
    ev.dataTransfer.setData("value","friet");
}

function piza(ev)
{
    ev.dataTransfer.setData("value","piza");
}

function landBelgie(ev)
{
    var data=ev.dataTransfer.getData("value");
    ev.target.appendChild(document.getElementById(data));
    ev.preventDefault();
    if(data == "friet")
    {
        alert("Goed gedaan!");
    }
    else
    {
        alert("probeer nog een keer");
    }
}

function landFrankrijk(ev)
{
    var data=ev.dataTransfer.getData("value");
    ev.target.appendChild(document.getElementById(data));
    ev.preventDefault();
    if(data == "piza")
    {
        alert("Goed gedaan!");
    }
    else
    {
        alert("probeer nog een keer");
    }
}
</script>


</head>

<body>
    
      

<div class="mid">

<p>Drag the W3Schools image into the rectangle:</p>

<div id="div1" ondrop="landBelgie(event)" ondragover="allowDrop(event)" ondragstart="frieten(event)"></div>  <!-- frieten -->
<br />
<div id="div2" ondrop="landFrankrijk(event)" ondragover="allowDrop(event)" ondragstart="piza(event)"></div> <!-- Piza -->
<br />


<img src="img/frieten.jpg" draggable="true" ondragstart="frieten(event)" width="336" height="69"/>

<img src="img/piza.jpg" draggable="true" ondragstart="piza(event)" width="336" height="69"/>
    
    
</div>


</body>

</html>
 
Hej Jim :)

Ik zie nog een aantal extra aanpassingen in je script. De tags zien er prima uit hoor ;) Voor de <img/>-tags heb je alleen de id-attributes weggehaald - die hebben we wel nodig. In de functies frieten en piza slaan we die namelijk op, zodat we later in landBelgie en landFrankrijk een referentie hebben naar wát er nou eigenlijk precies gesleept wordt ;)

Voor de <img/>-tags zetten we dus de id's er weer in:
HTML: 
<img id="drag1" src="img/frieten.jpg" draggable="true" ondragstart="frieten(event)" width="336" height="69"/>
<img id="drag2" src="img/piza.jpg" draggable="true" ondragstart="piza(event)" width="336" height="69"/>

Op het moment dat met één van beide images begonnen wordt te slepen, wordt de corresponderende functie (frieten of piza) uitgevoerd. Die functie krijgt als argument het event mee, die weer een dataTransfer-eigenschap heeft. Diezelfde dataTransfer hebben we tot onze beschikking wanneer de img gedropt wordt, en daar gaan we gebruik van maken :) Er zijn twee waarden die we willen 'onthouden': (1) Welk element wordt er gesleept, en (2) Welke waarde hoort daarbij? Die twee dingen kun je zo in je dataTransfer-object opslaan:
[JS]function frieten(ev) //op dezelfde manier voor piza
{
ev.dataTransfer.setData("dragTargetId", ev.target.id);
ev.dataTransfer.setData("value", "friet");
}[/JS]

Later, bij de drop van een element, wordt één van je drop-listeners uitgevoerd (landBelgie of landFrankrijk). Daar hebben we nodig: het gesleepte element (waarvan we de id hebben opgeslagen in dataTransfer), de bijbehorende waarde (ook opgeslagen), en de drop-area (de ev.target van dat moment). In een functie, met bovengenoemde variabelen op een rijtje:
[JS]function landBelgie(ev)
{
var dragTargetId = ev.dataTransfer.getData("dragTargetId"); //id die we eerder hebben opgeslagen
var dragTarget = document.getElementById(dragTargetId); //element dat erbij hoort
var value = ev.dataTransfer.getData("value"); //ook eerder opgeslagen
var dropTarget = ev.target;

ev.preventDefault();
dropTarget.appendChild(dragTarget);

if (value == "friet")
{
alert("Goed gedaan!");
}
else
{
alert("probeer nog een keer");
}
}[/JS]
...en dat op dezelfde manier weer voor landFrankrijk natuurlijk ;)

Ik heb 'm ook even in Chrome getest voor je, en dit zou moeten werken. Als 't niet lukt hoor ik het wel :)
 
Laatst bewerkt:
Hartelijk bedankt voor uw hulp Robin S ;).
Het werkt perfect ;).
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan