Как правильно отследить положение элемента?

Question

[Артур Кудашев]

Здравствуйте, делаю dnd и осталось лишь добавить подсветку карточкам - место куда добавиться элемент, если пользователь отпустит мышь. Эта подсветка должна появиться, когда я перетаскиваю элемент над другим. Мне нужно отследить куда именно добавить ее, над элементом или под ним. Я уже пытался сделать, но когда я перетаскивал элемент между двумя, то к обоим добавлялась подсветка. Мне нужен гарантировано отследить только один элемент.

Comments

[Stalker_RED]

нужно попасть между карточками, на карточку, или оба варианта?

[Артур Кудашев]

Stalker_RED, на карточку и она должна быть одна

[Stalker_RED]

Артур Кудашев, можете показать в песочнице текущий вариант?
Вангую, что вы не использовали события драг-н-дропа

[Артур Кудашев]

Stalker_RED, события dnd не использую, делаю через события мыши. В песочницу добавлять не буду. Мне нужно лишь узнать как правильно отследить элемент

[Stalker_RED]

Артур Кудашев, ссылку не открывали?

dragenter
Срабатывает, когда перемещаемый элемент попадает на элемент-назначение. Обработчик этого события показывает, что элемент находится над объектом на который он может быть перенесен. Если же обработчика нет, либо он не совершает никаких действий перемещение по умолчанию запрещено. Это событие также используется для того, чтобы подсветить либо промаркировать объект над которым происходит перемещения в случае, если перемещение на данный элемент разрешено. Для детальной информации смотрите Specifying Drop Targets.

dragover
Данное событие срабатывает каждые несколько сотен милисекунд, когда перемещаемый элемент оказывается над зоной, принимающей перетаскиваемые элементы. Для детальной информации смотрите Specifying Drop Targets.

drop
The drop event is fired on the element where the drop occurred at the end of the drag operation. A listener would be responsible for retrieving the data being dragged and inserting it at the drop location. This event will only fire if a drop is desired. It will not fire if the user cancelled the drag operation, for example by pressing the Escape key, or if the mouse button was released while the mouse was not over a valid drop target. For information about this, see Performing a Drop.

dragend
Источник перетаскивания получит событие dragend event when the drag operation is complete, whether it was successful or not. This event is not fired when dragging a file into the browser from the OS. For more information about this, see Finishing a Drag.

Answer 1

[Антон Шаманов]

https://jqueryui.com/sortable/#placeholder можешь не изобретать велосипед