search

marceljuenemann / angular-drag-and-drop-lists

Angular directives for sorting nested lists using the HTML5 Drag & Drop API
MIT License
2.16k stars 713 forks source link

Flex box causes `isFirstHalf` to report incorrectly #481

Open justincolangelo opened 6 years ago

justincolangelo commented 6 years ago

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