Draggable Sorted List with Javascript

 

course from Brad Traversy

Github code 

Features:

drag and drop HTML API

Array.prototype.sort()

closest() getAttribute()   data-index

HTML

draggable list is a unsorted list

the button is for checking  if the list after manipulating is sorted correctlly

CSS

when list item add class named over, the draggable should have a colored  background

after checking the order, if the order number is right, colored to blue ,if wrong, colored to red

JS

select elements draggable list and check button

the data is a richestPeople array string with richest first ordered

listItem  is to store the custom list array

create the list to DOM

map the data and get the random index to sort the list and then create all list items

Array.prototype.sort() sort by the callback function MDN

and then add the events  drag and drop

For each draggable list, the events contain dragstart,dragover,drop,dragenter,dragleave

drag and drop API

When drag starts on one list, get the specific data-index to be dragStartIndex

Element.closest(): MDN

The closest() method traverses the Element and its parents (heading toward the document root) until it finds a node that matches the provided selector string. Will return itself or the matching ancestor. If no such element exists, it returns null.

dragOver run when drag active

when drag enter into another list, add the classname over for the background color,when drag leave, remove the over classname.

when dragdrop happends, get the current data-index and swap the start index and end index,also remove the over classname 

swap the two list items with index and then render in DOM

When clicking the check oreder button, check if the current listItem array and original array is same. If the items names are different, add the class for color changing red , otherwise the items name are same, add the class for blue color.