我无法使div移动。它是一个自定义元素,由事件侦听器创建。这两个自定义元素都有自己的影子。
第一个自定义元素是<web-desktop>
/ WebDesktop.js第二个元素是<app-window>
/ AppWindow.js
<app-window>
是在我单击事件监听器后创建的。现在,我试图通过单击按钮使“窗口”(div)创建后移动。
但是我几个小时都没有成功。
我包括了这两个部分,我坚信问题出在AppWindow之内。
AppWindow 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 }
WebDesktop自定义元素
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 }
在<app-window>
上,您应该使用dragstart
事件处理程序,并在DragEvent.dataTransfer
属性中记录单击的位置:
appwindow.js
DragEvent.dataTransfer
在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 }
容器上,应防止<web-desktop>
事件的默认行为,然后定义dragover
事件处理程序以设置根据上下点击差异计算的新drop
位置:
webdesktop.js
<app-window>