Understanding Drag-and-Drop API in Lit (v3.0.0-pre.1)

[Zearin]

Background Context

I 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 Problem

Using a barebones setup to learn.

As simple as this is, the console is only firing dragstart events—but no drag or dragend events.

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 body:

<li-dragdrop>Item 1</li-dragdrop>
<li-dragdrop>Item 2</li-dragdrop>

I drag the element. I see the dragstart logged to the console, but nothing else.

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 dragstart. :-(

[augustjk]

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 doe preventDefault() 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 the addEventListener() option would also make it ignore any attempts to prevent default.

[Zearin]

Yup! Sorry I didn't follow up, but I incorrectly remembered when to call preventDefault().

Thanks 🙏🏽