Javascript 如何创建可拖动的web组件

所以我的任务之一是创建一个窗口，我应该能够在其中附加不同的应用程序。窗口本身或多或少已经完成了，我正在尝试使组件可以拖动

我相信大部分工作已经完成，而且确实有效。我可以在控制台中看到，当我移动鼠标时，X和Y位置实际上正在改变，但是，窗口本身并不移动

我相信这是因为pos3和pos4从来没有得到一个值，它们都是未定义的，我不知道我做错了什么。我希望你们能理解我所追求的，并为我指明正确的方向

小提琴：

这是我的代码，其中包含一些错误的变量命名：

const template = document.createElement('template')
template.innerHTML = `

<div id="container">
  <h1 id="mover">
  <span class="dot" style="background:#ED594A;"></span></h1>
  <!-- <chat-board></chat-board> -->
</div>
<!--container end-->


<style>

  .dot {
  margin-top: 4px;
  height: 12px;
  width: 12px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
}

    #container {
  height: 525px;
  width: 360px;
  margin: 100px auto;
  background: #f7f7f7;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
  border-radius: 20px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  position: absolute;
  z-index: 9;


}

#mover {
  background: #1F030C;
  color: white;
  margin: 0;
  padding: 10px 100px;
  text-transform: uppercase;
  font-size: 18px;
  font-weight: normal;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  cursor: move;
  z-index: 10;

}

    </style>
`

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

    this.attachShadow({ mode: 'open' })
    this.shadowRoot.appendChild(template.content.cloneNode(true))
    this.pos1 = this.pos1 || 0
    this.pos2 = this.pos2 || 0
    this.pos3 = this.pos3 || 0
    this.pos4 = this.pos4 || 0
    this.mover = this.shadowRoot.querySelector('#mover')
    this.cont = this.shadowRoot.querySelector('#container')
  }

  connectedCallback () {
    this.dragElement(this.cont)
  }

  dragElement (event) {
    this.mover.addEventListener('mousedown', (e) => {
      this.sender(event)
    })
  }

  elementDrag (event) {

    event = event || window.event
    this.moveWindow(event.clientX, event.clientY)
  }

  moveWindow (x, y) {
    this.pos1 = this.pos3 - x
    this.pos2 = this.pos4 - y
    this.pos3 = x
    this.pos4 = y
    this.style.top = this.offsetTop - this.pos2 + 'px'
    this.style.left = this.offsetLeft - this.pos1 + 'px'

  }

  closeDragElement () {
    /* stop moving when mouse button is released: */

    document.onmouseup = null
    document.onmousemove = null
  }

  // Events
  sender (event) {
    event = event || window.event
    this.pos3 = event.clientX
    this.pos4 = event.clientY
    console.log(this.pos3)
    document.onmouseup = this.closeDragElement
    document.onmousemove = this.elementDrag.bind(this)
  }
}

window.customElements.define('window-board', Window)

const template=document.createElement（'template'）
template.innerHTML=`
多特先生{
利润上限：4倍；
高度：12px；
宽度：12px；
背景色：#bbb；
边界半径：50%；
显示：内联块；
}
#容器{
高度：525px；
宽度：360px；
保证金：100像素自动；
背景：#f7f7f7；
长方体阴影：0.3pxRGBA（0,0,0,0.1）；
边界半径：20px；
-webkit边界半径：20px；
-moz边界半径：20px；
位置：绝对位置；
z指数：9；
}
#搬运工{
背景#1F03C；
颜色：白色；
保证金：0；
填充：10px 100px；
文本转换：大写；
字号：18px；
字体大小：正常；
边框左上半径：20px；
边框右上角半径：20px；
光标：移动；
z指数：10；
}
`
类窗口扩展了Window.HTMLElement{
构造函数（）{
超级（）
this.attachShadow（{mode:'open'}）
this.shadowRoot.appendChild（template.content.cloneNode（true））
this.pos1=this.pos1 | | 0
this.pos2=this.pos2 | | 0
this.pos3=this.pos3 | | 0
this.pos4=this.pos4 | | 0
this.mover=this.shadowRoot.querySelector（“#mover”）
this.cont=this.shadowRoot.querySelector（“#container”）
}
connectedCallback（）{
本.dragElement（本.续）
}
拖缆设备（事件）{
this.mover.addEventListener（'mousedown'，（e）=>{
此.sender（事件）
})
}
元素拖动（事件）{
event=event | | window.event
此.moveWindow（event.clientX，event.clientY）
}
移动窗口（x，y）{
this.pos1=this.pos3-x
this.pos2=this.pos4-y
这个.pos3=x
这个.pos4=y
this.style.top=this.offsetTop-this.pos2+'px'
this.style.left=this.offsetLeft-this.pos1+'px'
}
闭式排水管（）{
/*释放鼠标按钮时停止移动：*/
document.onmouseup=null
document.onmousemove=null
}
//事件
发送者（事件）{
event=event | | window.event
this.pos3=event.clientX
this.pos4=event.clientY
console.log（this.pos3）
document.onmouseup=this.closeDragElement
document.onmousemove=this.elementDrag.bind（this）
}
}
window.customElements.define（'window-board'，window）

检查此项

您需要向脚本中的阴影元素添加样式

调用

this.dragElement（）

函数以附加

mousedown

事件。我在构造器里做的

检查这个

您需要向脚本中的阴影元素添加样式

调用

this.dragElement（）

函数以附加

mousedown

事件。我在构造器里做的

---

你能加把小提琴吗？好了。我想我成功地做到了。谷歌应该是你的朋友。很多例子请你加一把小提琴？好了。我想我成功地做到了。谷歌应该是你的朋友。我的天啊，很多事情都很简单，但我有偏见，因为这是我自己的事情。我对你感激不尽。谢谢天啊，这总是很容易的事，但我有偏见，因为这是我自己的东西。我对你感激不尽。谢谢D