├── README.md
├── index.html
├── style.css
└── script.js
/README.md:
--------------------------------------------------------------------------------
1 | ## Sortable List
2 |
3 | [Demo](https://alvar91.github.io/drag-and-drop-list-html-css-js/) Display a scrambled list that can be sorted with drag and drop
4 |
5 | ## Project Specifications
6 |
7 | - Create an ordered list (Top 10 richest people)
8 | - Scramble list items randomly
9 | - Allow user to drag and drop an item to a different position
10 | - Button to check if items are in correct order
11 | - Show green for correct order and red for wrong order
12 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Top 10 Richest People
8 | 10 Richest People
16 | Drag and drop the items into their corresponding spots
17 |
18 |
19 | Check Order
20 |
22 |
23 |
24 |
25 |
26 |
--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css?family=Lato&display=swap');
2 |
3 | :root {
4 | --border-color: #e3e5e4;
5 | --background-color: #c3c7ca;
6 | --text-color: #34444f;
7 | }
8 |
9 | * {
10 | box-sizing: border-box;
11 | }
12 |
13 | body {
14 | background-color: #fff;
15 | display: flex;
16 | flex-direction: column;
17 | align-items: center;
18 | justify-content: flex-start;
19 | height: 100vh;
20 | margin: 0;
21 | font-family: 'Lato', sans-serif;
22 | }
23 |
24 | .draggable-list {
25 | border: 1px solid var(--border-color);
26 | color: var(--text-color);
27 | padding: 0;
28 | list-style-type: none;
29 | }
30 |
31 | .draggable-list li {
32 | background-color: #fff;
33 | display: flex;
34 | flex: 1;
35 | }
36 |
37 | .draggable-list li:not(:last-of-type) {
38 | border-bottom: 1px solid var(--border-color);
39 | }
40 |
41 | .draggable-list .number {
42 | background-color: var(--background-color);
43 | display: flex;
44 | align-items: center;
45 | justify-content: center;
46 | font-size: 28px;
47 | height: 60px;
48 | width: 60px;
49 | }
50 |
51 | .draggable-list li.over .draggable {
52 | background-color: #eaeaea;
53 | }
54 |
55 | .draggable-list .person-name {
56 | margin: 0 20px 0 0;
57 | }
58 |
59 | .draggable-list li.right .person-name {
60 | color: #3ae374;
61 | }
62 |
63 | .draggable-list li.wrong .person-name {
64 | color: #ff3838;
65 | }
66 |
67 | .draggable {
68 | cursor: pointer;
69 | display: flex;
70 | align-items: center;
71 | justify-content: space-between;
72 | padding: 15px;
73 | flex: 1;
74 | }
75 |
76 | .check-btn {
77 | background-color: var(--background-color);
78 | border: none;
79 | color: var(--text-color);
80 | font-size: 16px;
81 | padding: 10px 20px;
82 | cursor: pointer;
83 | }
84 |
85 | .check-btn:active {
86 | transform: scale(0.98);
87 | }
88 |
89 | .check-btn:focus {
90 | outline: none;
91 | }
92 |
--------------------------------------------------------------------------------
/script.js:
--------------------------------------------------------------------------------
1 | const draggable_list = document.getElementById('draggable-list');
2 | const check = document.getElementById('check');
3 |
4 | const richestPeople = [
5 | 'Jeff Bezos',
6 | 'Bill Gates',
7 | 'Warren Buffett',
8 | 'Bernard Arnault',
9 | 'Carlos Slim Helu',
10 | 'Amancio Ortega',
11 | 'Larry Ellison',
12 | 'Mark Zuckerberg',
13 | 'Michael Bloomberg',
14 | 'Larry Page'
15 | ];
16 |
17 | // Store listitems
18 | const listItems = [];
19 |
20 | let dragStartIndex;
21 |
22 | createList();
23 |
24 | // Insert list items into DOM
25 | function createList() {
26 | [...richestPeople]
27 | .map(a => ({ value: a, sort: Math.random() }))
28 | .sort((a, b) => a.sort - b.sort)
29 | .map(a => a.value)
30 | .forEach((person, index) => {
31 | const listItem = document.createElement('li');
32 |
33 | listItem.setAttribute('data-index', index);
34 |
35 | listItem.innerHTML = `
36 | ${index + 1}
37 |
41 | `;
42 |
43 | listItems.push(listItem);
44 |
45 | draggable_list.appendChild(listItem);
46 | });
47 |
48 | addEventListeners();
49 | }
50 |
51 | function dragStart() {
52 | // console.log('Event: ', 'dragstart');
53 | dragStartIndex = +this.closest('li').getAttribute('data-index');
54 | }
55 |
56 | function dragEnter() {
57 | // console.log('Event: ', 'dragenter');
58 | this.classList.add('over');
59 | }
60 |
61 | function dragLeave() {
62 | // console.log('Event: ', 'dragleave');
63 | this.classList.remove('over');
64 | }
65 |
66 | function dragOver(e) {
67 | // console.log('Event: ', 'dragover');
68 | e.preventDefault();
69 | }
70 |
71 | function dragDrop() {
72 | // console.log('Event: ', 'drop');
73 | const dragEndIndex = +this.getAttribute('data-index');
74 | swapItems(dragStartIndex, dragEndIndex);
75 |
76 | this.classList.remove('over');
77 | }
78 |
79 | // Swap list items that are drag and drop
80 | function swapItems(fromIndex, toIndex) {
81 | const itemOne = listItems[fromIndex].querySelector('.draggable');
82 | const itemTwo = listItems[toIndex].querySelector('.draggable');
83 |
84 | listItems[fromIndex].appendChild(itemTwo);
85 | listItems[toIndex].appendChild(itemOne);
86 | }
87 |
88 | // Check the order of list items
89 | function checkOrder() {
90 | listItems.forEach((listItem, index) => {
91 | const personName = listItem.querySelector('.draggable').innerText.trim();
92 |
93 | if (personName !== richestPeople[index]) {
94 | listItem.classList.add('wrong');
95 | } else {
96 | listItem.classList.remove('wrong');
97 | listItem.classList.add('right');
98 | }
99 | });
100 | }
101 |
102 | function addEventListeners() {
103 | const draggables = document.querySelectorAll('.draggable');
104 | const dragListItems = document.querySelectorAll('.draggable-list li');
105 |
106 | draggables.forEach(draggable => {
107 | draggable.addEventListener('dragstart', dragStart);
108 | });
109 |
110 | dragListItems.forEach(item => {
111 | item.addEventListener('dragover', dragOver);
112 | item.addEventListener('drop', dragDrop);
113 | item.addEventListener('dragenter', dragEnter);
114 | item.addEventListener('dragleave', dragLeave);
115 | });
116 | }
117 |
118 | check.addEventListener('click', checkOrder);
119 |
--------------------------------------------------------------------------------