Hi again,
I have another issue about the drop area. Actually, the whole exercise is in a "box" div and there are some other divs with everytime one exercise ; user can navigate from one to the other using a next and previous button.
I can't show it on a codepen (it doesn't work). But here is a part of the html structure (box 1, box 2 are not displayed together but one by one) :
<div class="box box-1 current" id="box1">
<div class="consigne">Complète les expressions à l’aide des mots suivants :<br><br>
<div class="move" id="word1">vol</div>
<div class="move" id="word2">nuée</div>
<div class="move" id="word3">rangée</div>
<div class="move" id="word4">bande</div>
<div class="move" id="word5">tas</div>
<div class="move" id="word6">pile</div>
</div>
<br><br><br><br><br><br>
<div class="exercice">Un(e) <div class="dropArea"></div> de cailloux</div>
<div><img class="img" src="images/SHero1.png"></div>
</div>
<div class="box box-2" id="box2">
<div class="consigne">Complète les expressions à l’aide des mots suivants :<br><br>
<div class="move" id="word1">vol</div>
<div class="move" id="word2">nuée</div>
<div class="move" id="word3">rangée</div>
<div class="move" id="word4">bande</div>
<div class="move" id="word5">tas</div>
<div class="move" id="word6">pile</div>
</div>
<br><br><br><br><br><br>
<div class="exercice">Un(e) <div class="dropArea"></div> d'assiettes</div>
<div><img class="img" src="images/SHero2.png"></div>
</div>
I wrote a code to define the drop area and it works perfectly now.
// Draggable labels
var droppables = $(".move");
var dropArea = $(".dropArea");
var overlapThreshold = "100%";
Draggable.create(droppables, {
cursor: "-webkit-grab",
onDragStart:function(){
TweenLite.set(droppables,{cursor:"-webkit-grabbing", opacity:0.6});
},
onDrag: function(e) {
if (this.hitTest(dropArea, overlapThreshold)) {
dropArea.addClass("highlight");
} else {
dropArea.removeClass("highlight");
}
},
onDragEnd:function(e){
TweenLite.set(droppables, {opacity:1});
TweenLite.set(dropArea, {opacity:1});
if(!dropArea.hasClass("highlight")) {
TweenLite.to(this.target, 0.2, {
x: 0,
y: 0
});
}
}
});
But, apparently, it concerns only the first div. For the second box, the drop area is not active (impossible to drop a label in it) and when the first drop area (box 1) is full (with a label), the second get the "highlight" properties I gave just as it was one and the same.
Any idea ? Thanks a lot and sorry to not show a codepen.