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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
|
document.addEventListener('DOMContentLoaded', () => {
let btn = document.querySelector('.modalButton');
btn.click();
});
const list_items = document.querySelectorAll(".list-item");
const lists = document.querySelectorAll(".list");
let draggedItem = null;
// Draggable Items
for (let i=0; i < list_items.length; i++){
const item = list_items[i];
/* Event Listeners */
item.addEventListener("dragstart", e => {
draggedItem = item;
setTimeout(() => (item.style.display = "none"), 0);
});
item.addEventListener("dragend", e => {
setTimeout(() => {
draggedItem.style.display = "block";
draggedItem = null}, 0);
checkIfAllGood();
});
}
// Dropping spots
for (let j=0; j < lists.length; j++){
const list = lists[j];
/* Event Listeners */
list.addEventListener("dragenter",e => (e.preventDefault()));
list.addEventListener("dragover",e => {
e.preventDefault();
list.style.backgroundColor = "rgba(0,0,0,0.9)";
});
list.addEventListener("dragleave",e => {
list.style.backgroundColor = "rgba(0,0,0,0.3)";
});
list.addEventListener("drop",e => {
if (list.children.length == 0 || list.className.includes("startBasket"))
list.append(draggedItem);
list.style.backgroundColor = "rgba(0,0,0,0.3)";
})
}
// Smooth scroll stuff
// const ekraaniPikkus = window.innerHeight;
// let d;
// if (ekraaniPikkus > 800)
// d = ekraaniPikkus / 8;
// else
// d = ekraaniPikkus / 4;
//
// console.log(ekraaniPikkus);
// console.log(document.body.scrollHeight);
// const maxScroll = document.body.scrollHeight;
//
// window.ondragover = function(e){
// console.log("Pos: ",e.clientY);
// console.log(d);
// console.log("X: ", e.y);
// //console.log(e);
//
// if (e.clientY > (ekraaniPikkus - d)){
// console.log("Should scroll down");
// if (maxScroll > e.y+d)
// window.scrollTo(0, e.y + d);
// else
// window.scrollTo(0, maxScroll);
// }
// else if (e.clientY < (d))
// window.scrollTo(0, e.y - d);
// }
function checkIfAllGood(){
let rightDone = [];
for (let j=0; j < lists.length; j++){
const list = lists[j];
if (list.className.includes("startBasket"))
continue;
else if (list.children.length == 1){
if (list.id == list.children[0].id){
if (!rightDone.includes(list.id))
rightDone.push(list.id);
}
}
} // For loop end
if (rightDone.length == 6) {
const btn = document.querySelector(".moveOn");
btn.disabled = false;
btn.onclick = () => location.href = "../plakat";
}
}
/* The Scrolling on thing while dragging */
// window.scrollTo(0, 500);
|
