クリックした場所にDOMが移動する (Phoenix + Stimulusjs)

app.css

.field {
  background-color: #eee;
  height: 90vh;
  width: 100%;
}

.marker {
  position: relative;
  left: 10px;
  height: 10px;
  width: 10px;
  display: inline-block;
  background-color: black;
  transition-duration: .3s;
  transition-delay: 0s;
  transition-timing-function: ease;
}

field_controller.js

import { Controller } from 'stimulus'

export default class FieldController extends Controller {
  static targets = [
    'marker',
    'posX'
  ]

  move(event) {
    const x = event.offsetX
    const y = event.offsetY

    this.posXTarget.textContent = `(${x}, ${y})`

    this.markerTarget.style.left = `${x}px`
    this.markerTarget.style.top = `${y}px`
  }
}

index.html.eex

<div data-controller="field">
  <div class="field" data-action="click->field#move">
    <span class="marker" data-target="field.marker"></span>
  </div>
  <div data-target="field.posX"></div>
</div>