листовка vue @событие drop не вступает в силу

#javascript #html #vue.js #leaflet

Вопрос:

Я хочу перетащить маркер из меню, но @drop не влияет на элемент l-карты. Вот мой код

 <l-map
  v-if="showMap"
  :center="center"
  :options="mapOptions"
  :CRS="CRS"
  :minZoom="minZoom"
  :maxZoom="maxZoom"
  :zoom="zoom"
  :max-bounds="imageBounds"
  style="height: 100%; width: 100%"
  @update:zoom="zoomUpdate"
  @update:center="centerUpdate"
  @mousemove="getMouseCords"
  ref="map"
  id="dragtarget"
  @drop.prevent="drop"
  @dragover.prevent="allowDrop"
  @dragleave.prevent="dragEnd">

drop(event) {
  this.dragOver = false;
  const data = JSON.parse(event.dataTransfer.getData('object'));
  const map = this.$refs.map.mapObject;

  const coordsX = event.clientX,
      coordsY = event.clientY,
      point = L.point( coordsX - 100, coordsY - 100),
      markerCoords = map.containerPointToLatLng(point);


  const payload = {
    name: data.name,
    cords: {
      x: markerCoords.lat,
      y: markerCoords.lng,
    }
  }

  this.$store.commit('addObject', payload);


},


<div
    @drop.prevent="drop"
    @dragover.prevent="allowDrop"
    @dragleave.prevent="dragEnd"
    style="height: 100%; width: 100%">
 

когда я обертываю элемент l-карты с помощью div и добавляю туда событие @drop, оно будет работать, но я не смогу затем запустить мышь. Обертывание с помощью div работает, но размещение маркера не является точным, и маркеры имеют смещения в месте падения.