Vue2: как получить плавное движение мышью?

Question

Я новичок в использовании vue для интерактивных элементов, но у меня есть опыт работы с d3.Я изо всех сил пытаюсь получить ожидаемое поведение с элементами DOM при перетаскивании.

Я хочу щелкнуть и переместить («перетащить») и сохранить положение элемента под мышью (а не переходить в верхний левый угол) и безМерцание.

Я прочитал несколько других постов и не смог найти пример или ответ на то, что искал.

Я попробовал комбинацию pageX/Y offsetX/Y clientX/Yс безрезультатно.

Примечание: в моем приложении я пытаюсь использовать компонент через @<event>.native, но здесь, даже без этого, я не могу заставить его работать

new Vue({
  el: '#app',
  data: {
    x: 100,
    y: 100,
    dragging: false
  },
  methods: {
    startDrag() {
      this.dragging = true;
    },
    stopDrag() {
      this.dragging = false;
    },
    doDrag(event) {
      if (this.dragging) {
        // let style = this.$refs.obj.$el.style

        this.x = event.clientX
        this.y = event.clientY
      }
    }
  },
  computed: {
    style() {
      return {
        left: `${this.x}px`,
        top: `${this.y}px`,
        position: 'absolute'
      }
    }
  }


});

#obj {
  width: 50px;
  height: 50px;
  background-color: coral;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id='app'>
  {{dragging}}: {{x}}, {{y}}
  <div ref="obj" id='obj' :style="style" @mousedown="startDrag" @mousemove="doDrag" @mouseup="stopDrag">

  </div>
  {{style}}


</div>

Answer 1

Во-первых, я настоятельно рекомендую вам не следить за движением элемента, а следить за указателем на всей странице:

mounted () {
  document.addEventListener('pointermove', this.doDrag.bind(this))
},
destroyed () {
  document.removeEventListener('pointermove', this.doDrag.bind(this))
}

Также, пожалуйста, измените координаты на {left: this.x - ${HALF_OF_ELEMENTS_SIZE}px}