Implementierungscode für die HTML-Drag & Drop-Funktion

// Breite des Kernstils des übergeordneten Containers: 100 %;
  Höhe: 100%;

//Position des Kernstils des Untercontainers: absolut;
  oben: 50 %;
  links: 50%;
  transformieren: übersetzen(-50 %,-50 %);

/*
* Ermitteln Sie die obere und linke Position des untergeordneten Containers relativ zum übergeordneten Container, wenn der untergeordnete Container erstellt wird */

montiert () {
  dies.links = dies.$refs.fatherBox.offsetLeft
  dies.oben = dies.$refs.fatherBox.offsetTop
}

/*
* Wenn die Maus gedrückt wird* 1. Aktivieren Sie das Flag, das es untergeordneten Containern ermöglicht, sich zu bewegen
* 2. Notieren Sie die Standortinformationen, wenn mit der Maus geklickt wird*/

Maus nach unten (e) {
  // Setzen Sie das Flag, um das Bewegen des Popup-Fensters zu ermöglichen
  this.moveFlag = wahr
  // Startposition der Maus speichern this.startLeft = e.clientX - this.left
  this.startTop = e.clientY - this.top
}

/*
* Wenn sich die Maus bewegt * 1. Bestimmen Sie, ob die Flagge die Bewegung des untergeordneten Containers zulässt * 2. Legen Sie die linke Position des Popup-Fensters fest * 3. Legen Sie die rechte Position des Popup-Fensters fest * /

bewegen (e) {
  //Überprüfen, ob die Flagge eine Bewegung zulässt, wenn (!this.moveFlag) return

  // Linke Position der Bullet-Box festlegen this.left = e.clientX - this.startLeft
  // Richtige Position der Bulletbox festlegen this.top = e.clientY - this.startTop

}

/*
* Wenn die Maustaste losgelassen wird* 1. Deaktivieren Sie das Flag, das das Verschieben von untergeordneten Containern ermöglicht
*/

Maus hoch (e) {
  this.flag = falsch
}

/*
* Codeausschnitt der übergeordneten Komponente, JSX-Version */

Standard exportieren {
  Requisiten: {
    Wiedergabeliste: {
      Typ: Array,
      erforderlich: true
    }
  },
  rendern () {
    zurückkehren (
      <div Stil={{Breite: '100%', Höhe: '100%'}} ref={'Vater'}>
        {
          diese.playList und diese.playList.map((item, index) => {
            zurückkehren (
              <Untergeordnete Komponenten
                Schlüssel={index}
                ref={index}
                zIndex={index}
                sichtbar={true}
                zurückWert={dieser.zurückWert}
                info={Artikel}
                Breite={600}
                Höhe={400}
              />
            )
          })
        }
      </div>
    )
  },
  Methoden: {
    backValue (links, oben, zIndex) {
      dies.$refs[zIndex].$el.style.top = `${top}px`
      dies.$refs[zIndex].$el.style.left = `${left}px`
    }
  }
}

<!-- VUE-Dateiversion des Codeausschnitts der übergeordneten Komponente -->

<Vorlage>
  <div
    ref="Vater"
    Stil „Breite: 100 %, Höhe: 100 %“
  >
    <Untergeordnete Komponenten
      v-for="(Element, Index) in Wiedergabeliste"
      :Schlüssel="Index"
      :ref="Index"
      :sichtbar="wahr"
      :z-index="Index"
      :back-value="ZurückWert"
      :info="Artikel"
      :close="schließen"
      :Breite="600"
      :Höhe="400"
    />
  </div>
</Vorlage>
<Skript>
Standard exportieren {
  Komponenten:
    VideoPlayerModal
  },
  Requisiten: {
    Wiedergabeliste: {
      Typ: Array,
      erforderlich: true
    }
  },
  Methoden: {
    backValue (links, oben, zIndex) {
      dies.$refs[zIndex][0].$el.style.top = `${top}px`
      dies.$refs[zIndex][0].$el.style.left = `${left}px`
    }
  }
}
</Skript>

/*
* 1. this.width-Daten sind der Breitenwert, der von der übergeordneten Komponente übergeben wird, oder der Standardwert, der von der untergeordneten Komponente selbst festgelegt wird.* 2. this.height-Daten sind der Höhenwert, der von der übergeordneten Komponente übergeben wird, oder der Standardwert, der von der untergeordneten Komponente selbst festgelegt wird.*/

bewegen (e) {
  //Überprüfen, ob die Flagge eine Bewegung zulässt, wenn (!this.moveFlag) return

  // Bestimmen Sie, ob es die linke Ansicht überschreitet, wenn (this.$refs.fatherBox.offsetLeft < this.width / 2) {
        // Deaktivieren Sie das Verschieben des Popup-Fensters. this.moveFlag = false
        // Linke Position der Bulletbox festlegen this.left = this.width / 2 + 10
        // Rufen Sie die Rückruffunktion auf, um den Offset für die übergeordnete Komponente this.backValue(this.left, this.top, this.zIndex) verfügbar zu machen.
        zurückkehren
      }

      // Bestimmen Sie, ob es die rechte Ansicht überschreitet, wenn (this.$refs.fatherBox.offsetLeft > document.body.clientWidth - this.width / 2) {
        // Deaktivieren Sie das Verschieben des Popup-Fensters. this.moveFlag = false
        // Richtige Position der Bulletbox festlegen this.left = document.body.clientWidth - this.width / 2 - 10
        // Rufen Sie die Rückruffunktion auf, um den Offset für die übergeordnete Komponente this.backValue(this.left, this.top, this.zIndex) verfügbar zu machen.
        zurückkehren
      }

      // Bestimmen Sie, ob es die Draufsicht überschreitet, wenn (this.$refs.fatherBox.offsetTop < this.height / 2 + 70) {
        // Deaktivieren Sie das Verschieben des Popup-Fensters. this.moveFlag = false
        // Obere Position der Bullet-Box festlegen this.top = this.height / 2 + 70 + 10
        // Rufen Sie die Rückruffunktion auf, um den Offset für die übergeordnete Komponente this.backValue(this.left, this.top, this.zIndex) verfügbar zu machen.
        zurückkehren
      }

      // Bestimmen Sie, ob es die untere Ansicht überschreitet, wenn (this.$refs.fatherBox.offsetTop > document.body.clientHeight - this.height / 2 - 50) {
        // Deaktivieren Sie das Verschieben des Popup-Fensters. this.moveFlag = false
        // Untere Position der Bullet-Box festlegen this.top = document.body.clientHeight - this.height / 2 - 50 - 10
        // Rufen Sie die Rückruffunktion auf, um den Offset für die übergeordnete Komponente this.backValue(this.left, this.top, this.zIndex) verfügbar zu machen.
        zurückkehren
      }

      // Linke Position der Bullet-Box festlegen this.left = e.clientX - this.startLeft
      // Richtige Position der Bulletbox festlegen this.top = e.clientY - this.startTop

      // Rufen Sie die Rückruffunktion auf, um den Offset für die übergeordnete Komponente this.backValue(this.left, this.top, this.zIndex) verfügbar zu machen.
}

Mauszeiger (e) {
  this.moveFlag = falsch
}