Checking Systeem

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Ventilatiesysteem Productontwikkelaar HBO WO Verwa

Samengevat: Zij bieden flexibele ventilatiematerialen, geluidsdempers, rookgasafvoer producten en industrieslangen. Ben jij een technisch productontwikkelaar? Heb jij ervaring met het ontwikkelen van nieuwe producten? Vaste baan: Technisch Productontwikkelaar HBO WO €3.000 - €4.000 Zij bieden een variëteit aan flexibele ventilatiematerialen, geluiddempers, rookgasafvoer producten, industrieslangen en ventilatieslangen voor de scheepsbouw. Met slimme en innovatieve materialen zorgen wij voor een gezonde en frisse leefomgeving. Deze werkgever is een organisatie die volop in ontwikkeling is met hardwerkende collega's. Dit geeft goede ontwikkelingsmogelijkheden. De branche van dit bedrijf is Techniek en Engineering. Functie: Voor de vacature als Technisch Productontwikkelaar Ede Gld HBO WO ga

Bekijk vacature »

Keimpe Hoekstra

Keimpe Hoekstra

23/11/2015 11:24:33
Quote Anchor link
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...

Afbeelding

.css
Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
/*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
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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();
}



Index.html
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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>


Alle hulp is welkom!
Gewijzigd op 23/11/2015 12:29:16 door - Ariën -
 
PHP hulp

PHP hulp

29/03/2024 13:02:17
 
Peter K

Peter K

23/11/2015 13:03:05
Quote Anchor link
Ik denk dat je hier wel iets aan hebt:
https://jqueryui.com/draggable/#revert
 
Keimpe Hoekstra

Keimpe Hoekstra

23/11/2015 13:32:30
Quote Anchor link
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>
Gewijzigd op 23/11/2015 13:33:15 door Keimpe Hoekstra
 
Peter K

Peter K

24/11/2015 10:42:21
Quote Anchor link
Begin eerst met de basis van een draggable van Jquery:
https://jqueryui.com/draggable/#default

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
<script>
  $(function() {
    $( "#draggable" ).draggable();
  });
  </script>


Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
<div id="draggable" class="ui-widget-content">
  <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
 
Thomas van den Heuvel

Thomas van den Heuvel

24/11/2015 14:18:57
Quote Anchor link
Een betere titel voor dit onderwerp is wellicht "drag drop puzzel".
 
Keimpe Hoekstra

Keimpe Hoekstra

24/11/2015 15:44:16
Quote Anchor link
@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.
 
Keimpe Hoekstra

Keimpe Hoekstra

26/11/2015 09:17:39
Quote Anchor link
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.

Afbeelding
 
Peter K

Peter K

26/11/2015 09:19:15
Quote Anchor link
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!
 
Keimpe Hoekstra

Keimpe Hoekstra

27/11/2015 09:52:22
Quote Anchor link
Nog een laatste vraag.

Afbeelding

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)
PHP script in nieuw venster Selecteer het PHP script
1
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;
                 }
             }


Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
#effect {
background-color: #fff;
}
Gewijzigd op 27/11/2015 09:54:53 door Keimpe Hoekstra
 
Peter K

Peter K

27/11/2015 09:57:09
Quote Anchor link
Probeer dit eens:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
 
Keimpe Hoekstra

Keimpe Hoekstra

27/11/2015 13:29:45
Quote Anchor link
Veranderd helaas niets.

Dit is nu me functie.

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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;
                 }
             }
        }
})


Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
#effect {
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)
PHP script in nieuw venster Selecteer het PHP script
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.

Afbeelding
Gewijzigd op 27/11/2015 13:45:52 door Keimpe Hoekstra
 
Peter K

Peter K

27/11/2015 13:58:54
Quote Anchor link
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

Keimpe Hoekstra

27/11/2015 14:43:52
Quote Anchor link
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!

Afbeelding

Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
$(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;
                 }
             }
        }
})


Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
.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:

Afbeelding

Afbeelding
 
Peter K

Peter K

27/11/2015 17:08:54
Quote Anchor link
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

Keimpe Hoekstra

30/11/2015 15:22:14
Quote Anchor link
Ik voeg als de opdracht klaar is altijd //comments erbij dus dat scheelt.
Maar alsnog bedankt voor de tips en hulp.
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.