css鼠标拖拉卡顿_vue中解决拖拽改变存在iframe的div大小时卡顿问题

这个问题可能是由于鼠标事件和 iframe 渲染事件的冲突导致的。您可以尝试在拖拽时将 iframe 隐藏或者将其 z-index 设置为 -1，以避免冲突。另外，您可以使用 CSS3 的 transform 属性来实现拖拽，这样可以减少因为重排和重绘导致的卡顿。具体做法如下：

1. 在拖拽开始时，将 iframe 的 z-index 设置为 -1 或者将其隐藏起来：

iframe {
  z-index: -1;
  /* 或者 */
  display: none;
}

2. 使用 CSS3 的 transform 属性来实现拖拽：

<div class="draggable" @mousedown="handleMouseDown">
  <!-- your content here -->
</div>

<script>
  export default {
    data() {
      return {
        dragging: false,
        startX: 0,
        startY: 0,
        translateX: 0,
        translateY: 0,
      };
    },
    methods: {
      handleMouseDown(event) {
        this.dragging = true;
        this.startX = event.clientX;
        this.startY = event.clientY;
      },
      handleMouseMove(event) {
        if (this.dragging) {
          this.translateX = event.clientX - this.startX;
          this.translateY = event.clientY - this.startY;
          this.$refs.draggable.style.transform = `translate(${this.translateX}px, ${this.translateY}px)`;
        }
      },
      handleMouseUp(event) {
        this.dragging = false;
      },
    },
    mounted() {
      document.addEventListener('mousemove', this.handleMouseMove);
      document.addEventListener('mouseup', this.handleMouseUp);
    },
    beforeDestroy() {
      document.removeEventListener('mousemove', this.handleMouseMove);
      document.removeEventListener('mouseup', this.handleMouseUp);
    },
  };
</script>

<style scoped>
  .draggable {
    position: absolute;
    top: 0;
    left: 0;
    cursor: move;
  }
</style>

注意，这里的 translate 属性是相对于元素自身的位置进行位移，而不是相对于父元素的位置进行位移。如果您需要相对于父元素进行位移，可以使用 position 和 top/left 属性来实现。