-
Notifications
You must be signed in to change notification settings - Fork 0
/
script.js
107 lines (88 loc) · 2.77 KB
/
script.js
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
const draggableList = document.getElementById("draggable-list");
const checkBtn = document.getElementById("check");
const richestPeople = [
'Jeff Bezos',
'Bill Gates',
'Warren Buffett',
'Bernard Arnault',
'Carlos Slim Helu',
'Amancio Ortega',
'Larry Ellison',
'Mark Zuckerberg',
'Michael Bloomberg',
'Larry Page'
];
const listItems = [];
let draggStartIndex;
createList();
function createList() {
[...richestPeople]
.map(a => ({
value: a,
sort: Math.random()
}))
.sort((a, b) => a.sort - b.sort)
.map(a => a.value)
.forEach((person, index) => {
const listItem = document.createElement("li");
listItem.setAttribute("data-index", index);
listItem.innerHTML = `
<span class="number">${index + 1}</span>
<div class="draggable" draggable="true">
<p class="person-name">${person}</p>
<i class="fas fa-grip-lines"></i>
</div>
`;
listItems.push(listItem);
draggableList.appendChild(listItem);
});
addEventListeners();
}
function dragStart() {
draggStartIndex = +this.closest('li').getAttribute('data-index');
}
function dragOver(e) {
e.preventDefault();
}
function dragDrop() {
const dragEndIndex = +this.getAttribute("data-index");
swapItems(draggStartIndex, dragEndIndex);
this.classList.remove("over");
}
function swapItems(fromIndex, toIndex) {
const itemOne = listItems[fromIndex].querySelector(".draggable");
const itemTwo = listItems[toIndex].querySelector(".draggable");
listItems[fromIndex].appendChild(itemTwo);
listItems[toIndex].appendChild(itemOne);
}
function dragEnter() {
this.classList.add("over");
}
function dragLeave() {
this.classList.remove("over");
}
function addEventListeners() {
const draggables = document.querySelectorAll(".draggable");
const dragListItems = document.querySelectorAll(".draggable-list li");
draggables.forEach(draggable => {
draggable.addEventListener("dragstart", dragStart);
});
dragListItems.forEach(item => {
item.addEventListener("dragover", dragOver);
item.addEventListener("drop", dragDrop);
item.addEventListener("dragenter", dragEnter);
item.addEventListener("dragleave", dragLeave);
})
};
function checkOrder() {
listItems.forEach((listItem, index) => {
const personName = listItem.querySelector(".draggable").innerText.trim();
if (personName !== richestPeople[index]) {
listItem.classList.add("wrong");
} else {
listItem.classList.remove("wrong");
listItem.classList.add("right");
}
})
}
checkBtn.addEventListener("click", checkOrder);