I created a draggable Web-Component with a slot:
const DragItemTemplate = document.createElement("template");
DragItemTemplate.innerHTML =
`<style>`
`div{`
`background: gray;`
`width: 200px;`
`height: 50px;`
`padding: 5px;`
`margin: 5px;`
`cursor: move;`
`display: flex;`
`align-items: center;`
`justify-content: center;`
`}`
`</style>`
`<div draggable="true">`
`<slot></slot>`
`</div>`;
class DragItem extends HTMLElement {
constructor() {
super();
this.attachShadow({mode: "open"});
this.shadowRoot.appendChild(DragItemTemplate.content.cloneNode(true));
}
}
window.customElements.define("drag-item", DragItem);
<!DOCTYPE html>
<html lang="en">
<body>
<drag-item></drag-item>
<drag-item>Slotted Text</drag-item>
</body>
</html>
When I start dragging the component by clicking into the component (not the text) everything works as it should. But when I try to drag it by clicking on the text (slot) it doesn't work.
What could I do to make the whole component (including the text) draggable?
CodePudding user response:
Set slot { pointer-events:none }
so nothing in the <slot>
triggers a mouse event, and thus your <div draggable
captures the drag
<drag-item></drag-item>
<drag-item>Slotted Text</drag-item>
<drag-item><div>Slotted Text</div></drag-item>
<script>
customElements.define("drag-item", class extends HTMLElement {
constructor() {
super()
.attachShadow({mode:"open"})
.innerHTML =
`<style>`
`div{`
`background: gray;`
`width: 200px;`
`height: 50px;`
`padding: 5px;`
`margin: 5px;`
`cursor: move;`
`display: flex;`
`align-items: center;`
`justify-content: center;`
`}`
`slot{pointer-events:none}` // <---------------
`</style>`
`<div draggable="true">`
`<slot></slot>`
`</div>`;
}
});
</script>