Checking Systeem

Door Keimpe Hoekstra op 23-11-2015 11:24 gewijzigd op 23-11-2015 12:29

2.143 views

Hallo mensen,

Ik heb al even wat rondgekeken op het internet maar kon geen manier vinden.
Hierbij wil ik graag hulp vragen om mij een aantal tips en een start te geven met het maken van een checking systeem.

Ik heb een leeropdracht gemaakt waar je de lichaamsdelen naar de goeie plek moet slepen.
Mijn sleep en drop functie is gelukt maar nu wil ik nog dat als het niet de goeie plek is dat ie terug gaat of een kruisje of dergelijke aangeeft.
Jullie snappen vast de bedoeling...

[img]http://s4.postimg.org/pz57urd95/ss1.jpg[/img]

.css

/*rug*/
#drag1 {
position: absolute;
width: 100px;
height: 40px;
font-size: 25px;
font-weight: 900;
}

/*maag*/
#drag2 {
position: absolute;
width: 100px;
height: 40px;
font-size: 25px;
font-weight: 900;
}
/*rug*/
#div1 {
	position: absolute;
	margin-left: 465px;
	margin-top: 150px;
    height: 60px;
	width: 40px;
    border: 0px solid black;
}

/*maag*/
#div2 {
	position: absolute;
	margin-left: 260px;
	margin-top: 130px;
    height: 45px;
	width: 40px;
    border: 0px solid black;
}

function allowDrop(ev) {
    ev.preventDefault();
}

function drag(ev) {
    ev.dataTransfer.setData("Text", ev.target.id);
}

function drop(ev) {
    var data = ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
    ev.preventDefault();
}

Index.html


<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<p id="drag1" draggable="true" ondragstart="drag(event)">
. rug</p>
 
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<p id="drag2" draggable="true" ondragstart="drag(event)">
. maag</p>

Alle hulp is welkom!

Peter K

27-11-2015 13:58

Zet eens een console.log('Test bericht'); neer op de plek waar je returns staan. (3 verschillende)
Zodoende kun je zien op welk moment welk deel van het script geactiveerd is.

In dat deel moet je dan toepassen dat hij rood gemarkeerd wordt.

Keimpe Hoekstra

27-11-2015 14:43

Ik heb het voor elkaar gekregen.
Toch voor de groene kleur met witte letters gegaan.
En hij gaat in het rood terug (tot zijn vaste plek) als het de foute plek is!


$(function() {
    $("#draggable").draggable({
        revert:  function(dropped) {
             var $draggable = $(this),
                 hasBeenDroppedBefore = $draggable.data('hasBeenDropped'),
                 wasJustDropped = dropped && dropped[0].id == "droppable";
             if(wasJustDropped) {
			 			 $draggable.animate(function() {
						// Animation complete
						$draggable.removeClass("effect2")
					 });
					 $draggable.addClass("effect2"); 
                 return false;
             } else {
                 if (hasBeenDroppedBefore) {
                     $draggable.animate({ top: 4, left: 0 }, 'slow', function() {
						// Animation complete
						$draggable.removeClass("effect")
					 });
					 $draggable.addClass("effect"); 
                     return false;
                 } else {
                     return true;
                 }
             }
        }
})


 .effect {
 background-color: red !important;
 color: white;
 }
 
 .effect2 {
 background-color: green !important;
 color: white;
 }

Bedankt voor alle hulp & jullie zien mij hier vast wel vaker terug!

Eindresultaat:

Peter K

27-11-2015 17:08

Om het nog wat overzichtelijker te maken zou je nog je inspringing netjes kunnen zetten voor alles.

Ook zie ik dat je een variabele $draggable hebt gemaakt met waarde $(this).
Persoonlijk vind ik het netter om overal $draggable gewoon veranderen naar $(this).

Ook is het wellicht handig om je classes effect en effect2 echt een naam te geven die toepasselijk zijn voor de actie.
Effect2 zegt niet echt iets over wat het gaat.
Nu is het nog duidelijk, maar over 2 maanden denk je waarschijnlijk huh?

Keimpe Hoekstra

30-11-2015 15:22

Ik voeg als de opdracht klaar is altijd //comments erbij dus dat scheelt.
Maar alsnog bedankt voor de tips en hulp.

Reageren

Inloggen om te reageren