Javascript 无法使div/元素在嵌套的shadowdom中移动

我不能让我的潜水器移动。它是一个自定义元素，由eventlistener创建。 这两个自定义元素都有自己的阴影域

树状结构

第一个自定义元素是

/WebDesktop.js 第二个元素是

/AppWindow.js

是在我单击eventlistener后创建的。 现在，我试图通过单击按钮使“窗口”（div）在创建之后可以移动

然而，我已经失败了好几个小时

我包括了这两部分，我坚信问题在AppWindow中

AppWindow自定义元素

const template = document.createElement('template')
template.innerHTML = `
<style>
#mydiv {
  position: absolute;
  z-index: 9;
  background-color: #f1f1f1;
  border: 1px solid #d3d3d3;
  text-align: center;
}
#mydivheader {
  padding: 10px;
  cursor: move;
  z-index: 10;
  background-color: #2196F3;
  color: #fff;
}
</style>
<div id="mydiv">
  <div id="mydivheader">Click here to move</div>
  <p>Move</p>
  <p>this</p>
  <p>DIV</p>
</div>
`

class AppWindow extends window.HTMLElement {
  constructor() {
    super()

    this.attachShadow({ mode: 'open' })
    this.shadowRoot.appendChild(template.content.cloneNode(true))
    this.appWindowHeader = this.shadowRoot.querySelector('#mydivheader')
    this.appWindow = this.shadowRoot.querySelector('#mydiv')

    this.prevX = undefined
    this.prevY = undefined
    this.newX = undefined
    this.newY = undefined
  }

  static get observedAttributes() {
    return []
  }

  attributesChangedCallback(name, oldValue, newValue) {
  }

  connectedCallback() {
    this.appWindow.addEventListener('mousedown', this.mousedown)
  }

  mousedown(event) {
    window.addEventListener('mousemove', this.mousemove)
    window.addEventListener('mouseup', this.mouseup)
    this.prevX = event.clientX
    this.prevY = event.clientY
  }

  mousemove(event) {
    this.newX = event.clientX
    this.newY = event.clientY
    const rect = this.appWindow.getBoundingClientRect()

    this.appWindow.style.left = rect.left - this.newX + 'px'
    this.appWindow.style.right = rect.top - this.newY + 'px'

    this.prevX = event.clientX
    this.prevY = event.clientY
  }

  mouseup() {

  }

}

window.customElements.define('app-window', AppWindow)

export { AppWindow }

import { AppWindow } from './AppWindow.js'
const template = document.createElement('template')
template.innerHTML = `
<style>
.resizer {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: black;
  z-index: 2;
}
#appImg1 {
  cursor:pointer;
}
#menuDiv {
  background-color: rgb(23, 23, 23);
  position: fixed;
  bottom: 0;
  width: 100%;
  padding: 0px;
  margin: 0px;
}
#menuDiv img {
  margin-left: 25px;
}
hr {
  border: 1px solid black;
  border-radius: 0px;
  margin:0;
  margin-bottom:5px;
}
</style>

<div id="webDesktopDiv">

  <div id="menuDiv">
  <hr>
  <img src="../image/icon.png" id="appImg1">
  </div>

</div>
`
class WebDesktop extends window.HTMLElement {
  constructor() {
    super()

    this.attachShadow({ mode: 'open' })
    this.shadowRoot.appendChild(template.content.cloneNode(true))

    this.menuDiv = this.shadowRoot.querySelector('#menuDiv')
    this.webDesktopDiv = this.shadowRoot.querySelector('#webDesktopDiv')
    this.appImg1 = this.shadowRoot.querySelector('#appImg1')

  }

  static get observedAttributes() {
    return []
  }

  attributesChangedCallback(name, oldValue, newValue) {
  }

  connectedCallback() {
    this.appImg1.addEventListener('click', event => {
      this.createWindow()
    })
  }

  createWindow() {
    let appWindow = document.createElement('app-window')
    appWindow.classList = 'item'
    appWindow.setAttribute('draggable', 'true')
    this.webDesktopDiv.appendChild(appWindow)
  }
}

window.customElements.define('web-desktop', WebDesktop)
export { WebDesktop }

const template=document.createElement（'template'））
template.innerHTML=`
#mydiv{
位置：绝对位置；
z指数：9；
背景色：#f1f1；
边框：1px实心#D3；
文本对齐：居中；
}
#mydivheader{
填充：10px；
光标：移动；
z指数：10；
背景色：#2196F3；
颜色：#fff；
}
单击此处移动
移动

这个

DIV

`
类AppWindow扩展了window.HTMLElement{
构造函数（）{
超级（）
this.attachShadow（{mode:'open'}）
this.shadowRoot.appendChild（template.content.cloneNode（true））
this.appWindowHeader=this.shadowRoot.querySelector（“#mydivheader”）
this.appWindow=this.shadowRoot.querySelector（“#mydiv”）
this.prevX=未定义
this.prevY=未定义
this.newX=未定义
this.newY=未定义
}
静态get ObservedAttribute（）{
返回[]
}
属性ChangedCallback（名称、旧值、新值）{
}
connectedCallback（）{
this.appWindow.addEventListener（'mousedown'，this.mousedown）
}
鼠标向下（事件）{
window.addEventListener（'mousemove'，this.mousemove）
window.addEventListener（'mouseup'，this.mouseup）
this.prevX=event.clientX
this.prevY=event.clientY
}
mousemove（事件）{
this.newX=event.clientX
this.newY=event.clientY
const rect=this.appWindow.getBoundingClientRect（）
this.appWindow.style.left=rect.left-this.newX+'px'
this.appWindow.style.right=rect.top-this.newY+'px'
this.prevX=event.clientX
this.prevY=event.clientY
}
mouseup（）{
}
}
window.customElements.define（'app-window'，AppWindow）
导出{AppWindow}

WebDesktop customelement

const template = document.createElement('template')
template.innerHTML = `
<style>
#mydiv {
  position: absolute;
  z-index: 9;
  background-color: #f1f1f1;
  border: 1px solid #d3d3d3;
  text-align: center;
}
#mydivheader {
  padding: 10px;
  cursor: move;
  z-index: 10;
  background-color: #2196F3;
  color: #fff;
}
</style>
<div id="mydiv">
  <div id="mydivheader">Click here to move</div>
  <p>Move</p>
  <p>this</p>
  <p>DIV</p>
</div>
`

class AppWindow extends window.HTMLElement {
  constructor() {
    super()

    this.attachShadow({ mode: 'open' })
    this.shadowRoot.appendChild(template.content.cloneNode(true))
    this.appWindowHeader = this.shadowRoot.querySelector('#mydivheader')
    this.appWindow = this.shadowRoot.querySelector('#mydiv')

    this.prevX = undefined
    this.prevY = undefined
    this.newX = undefined
    this.newY = undefined
  }

  static get observedAttributes() {
    return []
  }

  attributesChangedCallback(name, oldValue, newValue) {
  }

  connectedCallback() {
    this.appWindow.addEventListener('mousedown', this.mousedown)
  }

  mousedown(event) {
    window.addEventListener('mousemove', this.mousemove)
    window.addEventListener('mouseup', this.mouseup)
    this.prevX = event.clientX
    this.prevY = event.clientY
  }

  mousemove(event) {
    this.newX = event.clientX
    this.newY = event.clientY
    const rect = this.appWindow.getBoundingClientRect()

    this.appWindow.style.left = rect.left - this.newX + 'px'
    this.appWindow.style.right = rect.top - this.newY + 'px'

    this.prevX = event.clientX
    this.prevY = event.clientY
  }

  mouseup() {

  }

}

window.customElements.define('app-window', AppWindow)

export { AppWindow }

import { AppWindow } from './AppWindow.js'
const template = document.createElement('template')
template.innerHTML = `
<style>
.resizer {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: black;
  z-index: 2;
}
#appImg1 {
  cursor:pointer;
}
#menuDiv {
  background-color: rgb(23, 23, 23);
  position: fixed;
  bottom: 0;
  width: 100%;
  padding: 0px;
  margin: 0px;
}
#menuDiv img {
  margin-left: 25px;
}
hr {
  border: 1px solid black;
  border-radius: 0px;
  margin:0;
  margin-bottom:5px;
}
</style>

<div id="webDesktopDiv">

  <div id="menuDiv">
  <hr>
  <img src="../image/icon.png" id="appImg1">
  </div>

</div>
`
class WebDesktop extends window.HTMLElement {
  constructor() {
    super()

    this.attachShadow({ mode: 'open' })
    this.shadowRoot.appendChild(template.content.cloneNode(true))

    this.menuDiv = this.shadowRoot.querySelector('#menuDiv')
    this.webDesktopDiv = this.shadowRoot.querySelector('#webDesktopDiv')
    this.appImg1 = this.shadowRoot.querySelector('#appImg1')

  }

  static get observedAttributes() {
    return []
  }

  attributesChangedCallback(name, oldValue, newValue) {
  }

  connectedCallback() {
    this.appImg1.addEventListener('click', event => {
      this.createWindow()
    })
  }

  createWindow() {
    let appWindow = document.createElement('app-window')
    appWindow.classList = 'item'
    appWindow.setAttribute('draggable', 'true')
    this.webDesktopDiv.appendChild(appWindow)
  }
}

window.customElements.define('web-desktop', WebDesktop)
export { WebDesktop }

从“/AppWindow.js”导入{AppWindow}
const template=document.createElement（'template'）
template.innerHTML=`
.树脂{
位置：绝对位置；
宽度：10px；
高度：10px；
边界半径：5px；
背景色：黑色；
z指数：2；
}
#应用程序1{
光标：指针；
}
#梅努迪夫{
背景色：rgb（23,23,23）；
位置：固定；
底部：0；
宽度：100%；
填充：0px；
边际：0px；
}
#menuDiv img{
左边距：25px；
}
人力资源{
边框：1px纯黑；
边界半径：0px；
保证金：0；
边缘底部：5px；
}

`
类WebDesktop扩展了window.HTMLElement{
构造函数（）{
超级（）
this.attachShadow（{mode:'open'}）
this.shadowRoot.appendChild（template.content.cloneNode（true））
this.menuDiv=this.shadowRoot.querySelector（“#menuDiv”）
this.webDesktopDiv=this.shadowRoot.querySelector（“#webDesktopDiv”）
this.appImg1=this.shadowRoot.querySelector（“#appImg1”）
}
静态get ObservedAttribute（）{
返回[]
}
属性ChangedCallback（名称、旧值、新值）{
}
connectedCallback（）{
this.appImg1.addEventListener（'click'，event=>{
这是createWindow（）
})
}
createWindow（）{
让appWindow=document.createElement（'app-window'）
appWindow.classList='item'
appWindow.setAttribute（'draggable'，'true'）
this.webDesktopDiv.appendChild（appWindow）
}
}
window.customElements.define（'web-desktop'，WebDesktop）
导出{WebDesktop}
属性上的：

appwindow.js

const template = `
<style>
:host {
    position: absolute
}
#mydiv {
    z-index: 9;
    background-color: #f1f1f1;
    border: 1px solid #d3d3d3;
    text-align: center;
}
#mydivheader {
    padding: 10px;
    cursor: move;
    z-index: 10;
    background-color: #2196F3;
    color: #fff;
}
</style>
<div id="mydiv">
  <div id="mydivheader">Click here to move</div>
  <p>Move</p>
  <p>this</p>
  <p>DIV</p>
</div>
`
var count = 0 
class AppWindow extends window.HTMLElement {
    constructor() {
        super()
        this.attachShadow({ mode: 'open' }).innerHTML = template
    }

    connectedCallback() {
        this.setAttribute( 'draggable', 'true' )
        this.id = count++
        this.ondragstart = ev => ev.dataTransfer.setData( 'text', JSON.stringify( {
            id: ev.target.id,
            x: ev.clientX,
            y: ev.clientY
        } ) )
    }
}

window.customElements.define('app-window', AppWindow)

export { AppWindow }

import { AppWindow } from './AppWindow.js'
const template = `
<style>
:host {
    height: 100% ;
    display: block ;
}

button {
  position: fixed;
  bottom: 10px; left: 10px;
}
</style>

  <button>Add</buton>
`
var count = 0

class WebDesktop extends window.HTMLElement {
  constructor() {
    super()
    this.attachShadow( { mode: 'open' } ).innerHTML = template
  }

  connectedCallback() {
    this.shadowRoot.querySelector( 'button' ).onclick = () => this.shadowRoot.appendChild( new AppWindow )
    this.ondragover = ev => ev.preventDefault()
    this.ondrop = ev => {
        let origin = JSON.parse( ev.dataTransfer.getData( 'text' ) )
        console.log( origin )
        let app = this.shadowRoot.getElementById( origin.id )
        let childPos = app.getBoundingClientRect()
        app.style.left = childPos.left + ( ev.clientX - origin.x ) + 'px'
        app.style.top = childPos.top + ( ev.clientY - origin.y ) + 'px'
    } 
  }
}

window.customElements.define('web-desktop', WebDesktop)

如果您创建一个JSFIDLE、Codepen或内联SO代码，那么我们就可以运行代码了。。。乍一看：
.style.right=rect.top
是错误的。。我想好了，我会继续这样做。我保存了（从未使用过）这个：从我每周的JS通讯中读到