02/04/2021 - for if else loop javascript common errors, drag and drop and displace/shift

 javascript is not the best in terms of error reporting. mysterious errors that you only know by experience and recall. 

if else within for loops

• -silent errors that hijack your if-else
•  specificity - most specific condition, then the more general ones
•  type error - string instead of number
• use console.log typeof to check your args
•  equality operators
• do not confuse = with ===
• one is an assignment operator the other is a comparison operator
• i dont know why both sides equality does not apply here, had to use the && operator    
• test your code with
• console.log i for each condition
• check the i-s and the sequence, does it match what you expect
• beware of nesting

See the Pen sortable list by wly185 (@wly185) on CodePen.

original code by https://github.com/bradtraversy/vanillawebprojects/blob/master/sortable-list/script.js
i tweaked the code so that the drag and drop would displace/shift the list items

the drag and drop api

events

• dragstart
• your drag event functionality
• drop
• your drop event functionality
• dragover
• necessary to use e.preventdefault()
• dragenter, dragleave
• styling purposes so your user knows what they dragged and where they dragging to

unfortunately i dont know how to make the adjacent list item form a gap upon drag over