- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我无法让我的 div 移动。它是一个自定义元素,由事件监听器创建。这两个自定义元素都有自己的 shadowdom。
第一个自定义元素是<web-desktop>
/WebDesktop.js第二个元素是<app-window>
/应用程序窗口.js
<app-window>
在我点击一个事件监听器后创建。现在,我试图通过单击按钮使“窗口”(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 }
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
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
设置新 <app-window>
的事件处理程序由上下点击差计算的位置:
webdesktop.js
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)
关于javascript - 无法使 div/元素在嵌套的 shadowdom 中移动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59493969/
我正在通过制作一个简单的 webapp 来学习 Dart。我想到的应用程序 ui 有两个部分,一个是控制面板,另一个是工作区。通过单击控制面板中的按钮,用户应该能够控制工作区。 控制面板和工作区都是定
Angular 的 ViewEncapsulation.ShadowDom 与 ViewEncapsulation.Emulated 有什么区别? 我了解 ViewEncapsulation.None
一开始我想说我知道这个问题类似于: How to let imported css font / icons have effects on elements in the shadow dom? 事
外部 ShadowDOM 和内部 ShadowDOM 之间的 CSS 空间是分开的。 .foo a.bar { text-decoration: none; color: skyblue;
在 Rob Dodson 关于 Web Components 的演讲之后,他提到了全新的“cat”^^ 和“hat”^ CSS 选择器,我问过关于将样式不仅应用于自定义元素的 ShadowDOM,还应
我最近开始接触 WebComponents,我必须说到目前为止我发现它具有开创性!为了更好地理解这个概念,我尝试将我早期元素中的设计应用到可重用的 Web 组件中。我首先尝试创建一个具有一些附加功能的
关闭。这个问题是opinion-based .它目前不接受答案。 想改进这个问题?更新问题,以便 editing this post 可以用事实和引用来回答它. 7年前关闭。 Improve this
问题的答案Cascading style sheets use "id" or "class"表示 id 的 Put an ID on an element if "it is the ..." (e
我正在设计 Chrome 扩展程序。我希望能够更改选项卡中显示的标题而不更改真实的 标签。在后台脚本中,您可以将标题作为只读值进行访问。通常,您使用内容脚本并更改实际的 标签。 我正在尝试使用 Sha
可能是个简单的问题,但我还没有真正找到答案: ShadowDOM 或 WebComponents(作为更大的标准)实际上是否也封装了 JavaScript?就像每个组件都有单独的 namespace
尝试更改封装时,会出现 Emulated、Native、None 和最后一个新的“ShadowDom”4 个选项。我知道 ViewEncapsulation.Native用于使用 Shadow DOM
如何获取对 Angular 组件中封装设置为 ShadowDOM 的元素的引用? const element = document.getElementById(id); 例如返回null 编辑:添加
我一直在使用 FAST 工具包 ( https://fast.design ) 创建我自己希望使用的元素。在这段旅程中,我制作了一个工具栏。 作为一个工具栏,我想将按钮的背景更改为透明(看起来像: h
我想做一个 Angular 7 应用程序,将所有 encapsulation 设置为 ViewEncapsulation.ShadowDom - 这一切都很好很好。 但我似乎找不到任何可靠的引用资料来
我一直在使用 FAST 工具包 ( https://fast.design ) 创建我自己希望使用的元素。在这段旅程中,我制作了一个工具栏。 作为一个工具栏,我想将按钮的背景更改为透明(看起来像: h
我无法让我的 div 移动。它是一个自定义元素,由事件监听器创建。这两个自定义元素都有自己的 shadowdom。 树状结构 第一个自定义元素是/WebDesktop.js第二个元素是/应用程序窗口.
我想要一些关于如何设置 font-size 的想法到 ,动态地(即从 JS 而不是 CSS 设置 font-size)。 文档中没有 font-size 的默认属性。 看起来只能通过 mixin 设
虽然这似乎是一个重复的问题,但之前提出的那些问题都是基于 Polymer,而不是原生的 CustomElements,而且这是关于 css 本身,而不是渗透 ShadowDOM 或自定义 CSS 属性
我正在构建一个利用 d3.js 进行数据可视化的工具。该工具依赖于 webcomponentss 和 shadowDOM。 d3.js 无法仅通过 d3.select 选择 shadowDOM 中的任
在我当前的 Angular 7 应用程序中,我们正在努力处理来自库的组件,它需要一些 css 资源。我们不想将这些资源应用到我们应用程序的所有其余部分,而是应用到一个特定的组件,它的子组件和孙组件。
我是一名优秀的程序员,十分优秀!