Как определить предыдущий элемент по курсору?

Question

[BKaiyrbekov]

Добрый день... пытаюсь сделать Drag and Drop. и у меня появился такая проблема.

Получается у меня есть сетка item'ов


и мне нужно сделать так чтобы item 2 поставить на место item 1
и тут проблема я незнаю как определить что я курсором item 2 взял и хочу поставить на место item 1

весь код закинул сюда и вы также можете попробовать сами чтобы понять очем я имею говорю
https://codepen.io/bahaha2018k/pen/mdrYxdG

в интернет про Drag and Drop все показывает как пример список сверху вниз, но нигде не нашел про сетку
да и не предлагать плагины использовать

Answer 1

[BKaiyrbekov]

const actRect = dragEl.getBoundingClientRect();
const currRect = currentElement.getBoundingClientRect();
const prev = actRect.left > currRect.left;

Answer 2

[Алексей]

https://developer.mozilla.org/en-US/docs/Web/API/D...

Если проблема только с первым и последним елементом, то вот тебе костыль )

// Сортируем
rootEl.insertBefore(dragEl, target.previousElementSibling ? target.nextElementSibling : target );

Comments

[BKaiyrbekov]

проблема не с первым и последним елементом, я их как пример привел...
проблема была в том что я не могу местами поменять в левую сторону, то есть item 2 я его не могу поставить вместо item 1, и так с каждым item.

[Алексей]

BKaiyrbekov, я об этом и написал, так меняет item 2 с item1 и item20

[BKaiyrbekov]

Алексей, после первого/второго раза ломается)

[Алексей]

BKaiyrbekov, оно и будет ломаться с такой реализацией, достаточно просто поводить мышкой немного и ровно ни в какой елемент не встанет, здесь же я просто показал что достаточно смотреть есть ли какой-либо елемент "до", чтоб знать первый он или нет. Ну и также совсем понял зачем слушается ивент dragover, а не dragenter

[BKaiyrbekov]

я уже настолько отчаился что аж голова не работает... )))

но вроде как проблема решилась с getBoundingClientRect()

const actRect = dragEl.getBoundingClientRect();
const currRect = currentElement.getBoundingClientRect();
const prev = actRect.left > currRect.left;

но все же я от остальных жду ответа, да и предложении как сделать улучшить мой говно код ))