PHPhulp.nl PHPhulp.nl
35k+ leden Over PHPhulp Offerte opdracht Contact
K

Checking Systeem

Door Keimpe Hoekstra op 23-11-2015 11:24 gewijzigd op 23-11-2015 12:29
2.142 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;
}



JS
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!
K
Keimpe Hoekstra
23-11-2015 13:32 gewijzigd op 23-11-2015 13:33
Ik heb daar zekers wel wat aan maar zou niet weten hoe ik hier zou mee moeten beginnen.

Kan er iemand mij de goeie richting ophelpen met de functie die ik hier nodig voor heb,

zoals iets als .. ??

<code>
Function FalseCheck {
if Drag1 touches Div1
Good(); }
Else {
Revert();
}
</code>
Thomas van den Heuvel
24-11-2015 14:18
Een betere titel voor dit onderwerp is wellicht "drag drop puzzel".
K
Keimpe Hoekstra
24-11-2015 15:44
@Thomas Ik vind het helemaal mooi.

@Peter Is het ook mogelijk zonder Jquery? anders heb ik veel divwerk gedaan voor niks en heb 0% ervaring met jquery.
K
Keimpe Hoekstra
26-11-2015 09:17
Ik kan mededelen dat ik aardag op weg ben met jquery, heb bij codecademy jquery geleerd en afgerond.

En het lukt nu met de drag&drop&check functie, het is nog niet af maar het werkt wel.
Ook is het veel mooier geworden.

P
Peter K
26-11-2015 09:19
Kijk leuk om te zien dat het lukt.
Ik zie nu nog je vorige vraag of het zonder kan. Uiteraard kan het.
Alleen is Jquery bedacht voor dit soort situaties.

Kijk ook zeker eens hier naar:
http://jqueryui.com/demos/

Ga alles eens af en je zult opkijken van de mogelijkheden!
K
Keimpe Hoekstra
27-11-2015 09:52 gewijzigd op 27-11-2015 09:54
Nog een laatste vraag.



Als ik nu de "draggable" op de goeie locatie heb gezet word de tekst onduidelijk,
ik zou graag willen dat de achtergrond wit word als de draggable op de goeie locatie staat.

Had al even rondgekeken.

en heb wat geprobeert in mijn functie toe te voegen maar volgens mij doe ik iets kleins verkeerd.

Wie kan mij hier verder mee helpen?


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


[code]
#effect {
background-color: #fff;
}
[code]
P
Peter K
27-11-2015 09:57 gewijzigd op 27-11-2015 09:57
Probeer dit eens:


$("#effect").css("background-color", "white");


p.s.
Om iets als code te weergeven moet je het tussen blokhaken plaatsen [ en ] i.p.v. < en >
K
Keimpe Hoekstra
27-11-2015 13:29 gewijzigd op 27-11-2015 13:45
Veranderd helaas niets.

Dit is nu me functie.


$(function() {
    $("#draggable").draggable({
        revert:  function(dropped) {
             var $draggable = $(this),
                 hasBeenDroppedBefore = $draggable.data('hasBeenDropped'),
                 wasJustDropped = dropped && dropped[0].id == "droppable";
             if(wasJustDropped) {
				$("#effect").css("background-color", "white"); 
                 return false;
             } else {
                 if (hasBeenDroppedBefore) {
                     $draggable.animate({ top: 0, left: 0 }, 'slow');
                     return false;
                 } else {
					$("#effect").css("background-color", "red"); 
                     return true;
                 }
             }
        }
})




#effect {
background-color: white;
}


[size=xsmall]Toevoeging op 27/11/2015 13:42:28:[/size]






Ik heb het nu anders gedaan.

Natuurlijk gewoon heel simpel in css bij elke #draggable
 background-color: white;

meegegeven maar nu wil ik nog dat als hij niet goed geplaatst is dat de achtergrond van de draggable rood word.

Dus heb je eigenlijks nog steeds even nodig... ;)
Nu wel stuk duidelijker iig.

Reageren

Inloggen om te reageren