-
Background ContextI managed to learn the basics of the Drag-and-Drop API using normal elements and event listeners. But I wanted to see if I could recreate the same functionality with Web Components. I have barely worked with Web Components (although I read about them a lot, because I’ve been interested in using them for some time). After some trouble recreating my Drag-and-Drop functionality in a “vanilla” Web Component, I decided to give Lit a try (because it builds on existing standards, which I like). (I’m trying Lit v3.0.0-pre.1, because after reading the docs about the differences, it looks like mostly removing deprecated stuff. Since I’m learning as I go, I like the removal of deprecated stuff because it means I won’t accidentally learn something that is going away when v3 is officially published.) The ProblemUsing a barebones setup to learn. As simple as this is, the console is only firing Here is the class: class LiDragdrop extends LitElement {
static styles = css`
:host { display: block }
:host b { display: inline-block }
`
constructor() {
super()
}
connectedCallback() {
super.connectedCallback()
this.setAttribute('draggable', 'true')
this.addEventListener('dragstart', this.onDragStart, {passive: false})
this.addEventListener('drag', this.onDrag)
this.addEventListener('dragend', this.onDragEnd)
}
onDragStart(evt) {
evt.preventDefault()
evt.dataTransfer.effectAllowed = 'move'
evt.dataTransfer.setData('text/html', this.outerHTML)
console.log(evt.type, `${evt.target.localName} (${evt.target.textContent})`, evt)
}
// fires repeatedly while dragging
onDrag(evt) {
evt.preventDefault()
console.log(evt.type, `${evt.target.localName} (${evt.target.textContent})`, evt)
}
// always fires, even for unsuccessful drops
onDragEnd(evt) {
console.log(evt.type, evt.target.localName, evt)
}
render() {
return html`<b>⠿</b><slot></slot>`
}
}
customElements.define('li-dragdrop', LiDragdrop) And besides the bare-bones HTML doc, here is all I have in the <li-dragdrop>Item 1</li-dragdrop>
<li-dragdrop>Item 2</li-dragdrop> I drag the element. I see the I am unsure if this is related to Shadow DOM events or Lit. I just know that I was able to pull off using the complete API using standard HTML elements, but as soon as I try Web Components, events don’t get any further than |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 1 reply
-
Sorry for the late reply on this. Maybe you've already figured it out but you're only seeing the Commenting out the Alternatively, passing |
Beta Was this translation helpful? Give feedback.
Sorry for the late reply on this. Maybe you've already figured it out but you're only seeing the
dragstart
event because the handler for that doepreventDefault()
on the event, preventing any further events from firing.Commenting out the
evt.preventDefault()
line firings all the events as you can see here.See here: https://lit.dev/playground/#gist=31e8bf207039d1c302bacd2a7b9efadd
Alternatively, passing
{passive: true}
to theaddEventListener()
option would also make it ignore any attempts to prevent default.