I try to build a game with my draggables, so if i drop my draggable images in the right dropzone then 10 points get added to divResult otherwise 5 points gets subtracted.
This is what I tried:
$(document).ready(() => {
$('.dragme').draggable();
$('.dropzone').droppable({
accept: '.dragme',
drop: function(event, ui) {
if (ui.draggable.data('id') === $(this).data('accept')) {
for (let i = 0; i < 10; i += 10) {
$('#divResult').html('het aantal punten is: ' + i)
}
} else {
let aftrek = 5
$('#divResult').html('Jammer, aantal punten aftrek is: ' + i -
aftrek)
}
}
})
})
.dropzone {
border: 1px solid red;
}
<div class="dragme tekst" data-id="1"><img src="https://picsum.photos/id/1/100" alt="" width="100px" height="100px"></div>
<div class="dragme tekst" data-id="2"><img src="https://picsum.photos/id/2/100" alt="" width="100px" height="100px"></div>
<div class="dragme tekst" data-id="3"><img src="https://picsum.photos/id/3/100" alt="" width="100px" height="100px"></div>
<div class="dropzone" data-accept="1"><img src="https://picsum.photos/id/1/150" alt="" width="150px" height="150px"></div>
<div class="dropzone" data-accept="2"><img src="https://picsum.photos/id/2/150" alt="" width="150px" height="150px"></div>
<div class="dropzone" data-accept="3"><img src="https://picsum.photos/id/3/150" alt="" width="150px" height="150px"></div>
<br clear="all" />
<div id="divResult"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js">
</script>
<link rel="stylesheet" href="jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js">
</script>
I am guessing you want something like this?
$(document).ready(() => {
let i = 0; // initialize variable with 0 points
$('.dragme').draggable();
$('.dropzone').droppable({
accept: '.dragme',
drop: function(event, ui) {
if (ui.draggable.data('id') === $(this).data('accept')) {
i += 10; // add ten points
$('#divResult').html('het aantal punten is: ' + i)
} else {
i -= 5; // subtract five points
$('#divResult').html('Jammer, aantal punten aftrek is: ' + i)
}
}
})
})
<div class="dragme tekst" data-id="1"><img src="kitten1.jpg" alt="" width="100px" height="100px"></div>
<div class="dragme tekst" data-id="2"><img src="kitten2.jpg" alt="" width="100px" height="100px"></div>
<div class="dragme tekst" data-id="3"><img src="kitten3.jpg" alt="" width="100px" height="100px"></div>
<div class="dropzone" data-accept="1"><img src="kitten1.jpg" alt="" width="150px" height="150px"></div>
<div class="dropzone" data-accept="2"><img src="kitten2.jpg" alt="" width="150px" height="150px"></div>
<div class="dropzone" data-accept="3"><img src="kitten3.jpg" alt="" width="150px" height="150px"></div>
<br clear="all" />
<div id="divResult"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js">
</script>
<link rel="stylesheet" href="jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js">
</script>