This is the 5th day of my participation in the August More Text Challenge

preface

Requirement: the implementation of bullet box can be dragged and moved, embedded chat dialog box for IFrame.

The problem

Problems encountered: Because of the embedded IFrame, when the mouse is pressed and moved quickly (the mouse is out of the frame), the mouse event is invalid. The intuitive feeling is that the drag is stuck, and the left and right movement is ok, but the fast down movement is invalid.

Cause analysis,

When moving left or right, the mouse is always in the light blue area of the border. When moving down quickly, the mouse escapes from the light blue area and moves to the element of the IFrame

The solution

The pointer-events value None indicates that the mouse event “penetrates” the element and specifies anything “below” the element. (MDN)

Therefore, set the pointer-events value of iframe to None when mousedown is pressed so that events can penetrate the entire box. The mouse release event mouseup is unset.

In addition, when the popbox is dragged and moved, the base map will also move, the setting idea is the same as iframe.

Complete function code:

<template>
  <div
    class="draggable-div"
    :id="domId"
    @mousedown="handleMouseDown"
    :style="dragStyleStr"
  >
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: 'DraggableDiv'.data() {
    return {
      dragStyleStr: ' '.dragMes: {},
      domId: ' '
    };
  },
  props: {
    artDomId: String
  },
  mounted() {
    this.domId = this.artDomId ? this.artDomId : new Date().getTime();
  },
  methods: {
    handleMouseDown(e) {
      const ele = document.getElementById('chatPanelIframe');
      ele.style.pointerEvents = 'none';
      this.bus.$emit('setPan'.false);
      const that = this;
      const oBox = document.getElementById(this.domId);
      this.dragMes.disX = e.clientX - oBox.offsetLeft;
      this.dragMes.disY = e.clientY - oBox.offsetTop;
      document.onmousemove = e= > {
        let left = e.clientX - this.dragMes.disX + 'px';
        let top = e.clientY - this.dragMes.disY + 'px';
        this.dragStyleStr = `left: ${left}; top:${top}`;
      };
      document.onmouseup = () = > {
        this.bus.$emit('setPan'.true);
        ele.style.pointerEvents = 'auto';
        document.onmousemove = document.onmouseup = null; }; e.preventDefault(); }}};</script>

<style lang="scss" scoped>
.draggable-div {
  position: fixed;
  z-index: 9999;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>

Copy the code

conclusion

The above is the development of the box drag encountered some problems, for your reference. You may encounter fewer maps in your development process, but this is just an example. You can use the same idea when dealing with scrollbars, for example.