Перетаскивание элемента внутри элемента div, но при перетаскивании элемент мигает - PullRequest
Новая
       20

Перетаскивание элемента внутри элемента div, но при перетаскивании элемент мигает

0 голосов
/ 15 апреля 2020

Я пытаюсь перетащить элемент внутри другого элемента div, но он постоянно мигает при перетаскивании. Я воссоздал проблему с этой песочницей https://codesandbox.io/s/focused-cache-l3yos

<template>
  <div id="app">
    <div id="board" @mousemove="dragOver">
      <div
        class="draggableItem"
        @mousedown="dragStart"
        @mouseup="dragStop"
        :style="{top: this.top + 'px', left: this.left + 'px'}"
      >This should be draggable</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "App",
  data: function() {
    return {
      isDragging: false,
      top: 50,
      left: 50
    };
  },
  methods: {
    dragOver: function(e) {
      if (this.isDragging) {
        this.left = e.offsetX;
        this.top = e.offsetY;
      }
    },
    dragStart: function(e) {
      this.isDragging = true;
    },
    dragStop: function(e) {
      this.isDragging = false;
    }
  }
};
</script>

1 Ответ

1 голос
/ 15 апреля 2020

Вы можете рассчитать позицию как смещение от начальной позиции, а затем обновить ее на основе движения. Это позволит рисовать по любой части. Вы можете (и должны IMHO) динамически присоединять и удалять обработчики событий.

Вот как это может выглядеть: 

<template>
  <div id="app">
    <div id="board">
      <div
        class="draggableItem"
        @mousedown="dragStart"
        :style="{top: this.top + 'px', left: this.left + 'px'}"
      >This should be draggable</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "App",
  data: function() {
    return {
      isDragging: false,
      top: 50,
      left: 50,
      startTop: 0,
      startLeft: 0
    };
  },
  methods: {
    dragOver: function(e) {
      if (this.isDragging) {
        this.top = e.clientY - this.startTop;
        this.left = e.clientX - this.startLeft;
      }
    },
    dragStart: function(e) {
      window.addEventListener('mousemove', this.dragOver)
      window.addEventListener('mouseup', this.dragStop)
      this.isDragging = true;
      this.startTop = e.clientY - this.top;
      this.startLeft = e.clientX - this.left;
    },
    dragStop: function(e) {
      window.removeEventListener('mousemove', this.dragOver)
      window.removeEventListener('mouseup', this.dragStop)
      this.isDragging = false;
    }
  }
};
</script>
...