A layout that I am working on is attached here, but I have two problems:
Plesae view the layout in screens bigger than 1024px.
If anyone can let me know, it would be amazing.
The positioning problem comes from the values you have provided to translateX
and translateY
, respectively, here:
.problemanserwrapper .problemanswers.ui-draggable-dragging {
transform: rotate(0)
}
.problemanserwrapper .problemanswers:nth-child(1).ui-draggable-dragging {
transform: rotate(0)
}
.problemanserwrapper .problemanswers:nth-child(2).ui-draggable-dragging {
transform: rotate(0) translateX(75%) translateY(-25%)
}
.problemanserwrapper .problemanswers:nth-child(3).ui-draggable-dragging {
transform: rotate(0) translateX(135%) translateY(-100%)
}
.problemanserwrapper .problemanswers:nth-child(4).ui-draggable-dragging {
transform: rotate(0) translateX(275%) translateY(-80%)
}
.problemanserwrapper .problemanswers:nth-child(5).ui-draggable-dragging {
transform: rotate(0) translateX(380%) translateY(47%)
}
.problemanserwrapper .problemanswers:nth-child(6).ui-draggable-dragging {
transform: rotate(0) translateX(492%) translateY(-20%)
}
.problemanserwrapper .problemanswers:nth-child(7).ui-draggable-dragging {
transform: rotate(0) translateX(92%) translateY(72%)
}
.problemanserwrapper .problemanswers:nth-child(8).ui-draggable-dragging {
transform: rotate(0) translateX(202%) translateY(40%)
}
.problemanserwrapper .problemanswers:nth-child(9).ui-draggable-dragging {
transform: rotate(0) translateX(302%) translateY(-20%)
}
.problemanserwrapper .problemanswers:nth-child(10).ui-draggable-dragging {
transform: rotate(0) translateX(402%) translateY(90%)
}
If you find their right value, then their positioning will be okay. I did not do this for all of them, but I will give you an example:
.problemanserwrapper .problemanswers:nth-child(3).ui-draggable-dragging {
transform: rotate(0) translateX(75%) translateY(-50%)
}
The cause of the second problem is that you use a single variable called pastDraggable
to track the history of all the three boxes. Whenever you put an item into a box, the value of pastDraggable
will be changed. Whenever you put your next item, the value of pastDraggable
will be the previous one, independently of its box, it will be removed from the box and the new value will override. You should declare pastDraggable
as an array:
var pastDraggable = ["", "", ""];
and in the drop
event, find out the index:
var droppableIndex = 0;
if ($(this).hasClass("droppable2")) droppableIndex = 1;
else if ($(this).hasClass("droppable3")) droppableIndex = 2;
and at every usage of pastDraggable
, make sure you use it along with its index, as pastDraggable[droppableIndex]
.