Flex box causes isFirstHalf to report incorrectly

[justincolangelo]

When using display: flex on the container for the list, and flex-direction: row-reverse or column-reverse, the placeholders are showing up in odd places.

This line only takes into account LTR.

var isFirstHalf = event.clientX < rect.left + rect.width / 2;

If there is a way to check if the parent is using flex, and flex-direction is set to something in the reverse, this statement would need to be ternary.

var isFirstHalf = isFlexReverse ? 
      event.clientX > rect.left + rect.width / 2 :
      event.clientX < rect.left + rect.width / 2;

As an example I tried this with a simple CodePen, no angular, just jquery, html, css.

https://codepen.io/justincolangelo/pen/oyZEBK