Binding one function to multiple events from Alpine.data

[Yinci]

For all my complex code, I use Alpine.data so everything is nicely wrapped. However, I've been working on a draggable script that allows drag and drop, and found out it doesn't support touch. To get this to work I'd probably execute the same code on both events. I was wondering if there's a possibility to bind a single function to multiple events (without having to make it a callable function)

Example code:

draggable: {
    ['x-on:dragstart.self']() {
        this.dragged = this.$el;
    },

    // Would like to see something like 
    ['x-on:dragstart.self', 'x-on:touchstart.self`]() {
        this.dragged = this.$el;
    }
}

I fear that there's no other option than a callable function, but I just wanted to know if there's options.

[SimoTod]

not possible, the square syntax is a standard javascript thing to allow the usege of a variable value as a key via interpolation, the content should resolve to a single value. It's not a custom Alpine feature.

In your case,

'x-on:dragstart.self'() {
     this.dragged = this.$el;
}

would work as well but using square brackets you can have stuff like

let foo = 'x-on:dragstart.self'
...
[foo]() {
     this.dragged = this.$el;
}

Or
would work as well but using square brackets you can have stuff like

let foo = 'dragstart.self'
...
['x-on:' + foo]() {
     this.dragged = this.$el;
}

[Yinci]

Alright. Thanks for taking the time to write such an in-depth answer 😄

Didn't think it was possible but it would have been nice.