HTML 5 Drag Drop - Получить место перетаскивания перетаскиваемого элемента

Question

Я пытаюсь реализовать виджет, куда вы перетаскиваете элемент в контейнер.Я хочу, чтобы перетаскиваемый элемент перетаскивался в верхнем левом углу, но вместо этого event.offsetY возвращает местоположение мыши.

Я также пытался layerY, но это не так.

dropped(e) {
  console.log('dropped at', e.offsetX, e.offsetY);
}

Есть ли простой способ получить его или библиотеку, которую я могу использовать?

Answer 1

Во-первых, вам нужно выяснить, где ваша мышь относительно вашего элемента, когда вы впервые начинаете перетаскивать его .Сделайте это, сравнив начальные e.offsetX и e.offsetY со страницей ;

. Заберите элементы offsetX и offsetY от мыши offsetX и offsetY.Это может означать, что вы начали перетаскивать в позиции 50 на 60 пикселей в верхнем левом углу элемента;

let initialPos = {
  x: e.offsetX - element.getBoundingClientRect().left, 
  y: e.offsetY - element.getBoundingClientRect().top
}

Затем можно использоватьэто 50px 60px позиция, когда вы опускаете элемент, чтобы узнать, где находится верхний левый угол элемента относительно вашей мыши.