Checking Systeem
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...
.css
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
/*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;
}
#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
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
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();
}
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
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
<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>
<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!
Gewijzigd op 23/11/2015 12:29:16 door - Ariën -
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>
Gewijzigd op 23/11/2015 13:33:15 door Keimpe Hoekstra
https://jqueryui.com/draggable/#default
Code (php)
1
2
3
4
5
2
3
4
5
<script>
$(function() {
$( "#draggable" ).draggable();
});
</script>
$(function() {
$( "#draggable" ).draggable();
});
</script>
Code (php)
1
2
3
2
3
<div id="draggable" class="ui-widget-content">
<p>Drag me around</p>
</div>
<p>Drag me around</p>
</div>
Daarna kun je dit toevoegen:
https://jqueryui.com/draggable/#snap-to
Daarna kun je de revert toevoegen:
https://jqueryui.com/draggable/#revert
@Peter Is het ook mogelijk zonder Jquery? anders heb ik veel divwerk gedaan voor niks en heb 0% ervaring met jquery.
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.
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!
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?
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
$(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;
}
}
$("#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 (php)
1
2
3
4
2
3
4
#effect {
background-color: #fff;
}
background-color: #fff;
}
Gewijzigd op 27/11/2015 09:54:53 door Keimpe Hoekstra
Code (php)
1
$("#effect").css("background-color", "white");
p.s.
Om iets als code te weergeven moet je het tussen blokhaken plaatsen [ en ] i.p.v. < en >
Gewijzigd op 27/11/2015 09:57:32 door Peter K
Dit is nu me functie.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
$(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;
}
}
}
})
$("#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;
}
}
}
})
Code (php)
1
2
3
2
3
#effect {
background-color: white;
}
background-color: white;
}
Toevoeging op 27/11/2015 13:42:28:
Ik heb het nu anders gedaan.
Natuurlijk gewoon heel simpel in css bij elke #draggable
Code (php)
1
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.
Gewijzigd op 27/11/2015 13:45:52 door Keimpe Hoekstra
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.
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!
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
$(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;
}
}
}
})
$("#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;
}
}
}
})
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
.effect {
background-color: red !important;
color: white;
}
.effect2 {
background-color: green !important;
color: white;
}
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:
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?
Maar alsnog bedankt voor de tips en hulp.