search

konvajs / konva

Konva.js is an HTML5 Canvas JavaScript framework that extends the 2d context by enabling canvas interactivity for desktop and mobile applications.
http://konvajs.org/
Other
11.07k stars 896 forks source link

Handling drop, dragenter, and dragleave events on Konva.Group from html list with draggable elements #1784

Closed carlos-v278 closed 1 week ago

carlos-v278 commented 1 week ago

I'm currently working on a new version of a restaurant seating plan, and this version needs to be implemented using Konva. The old version was developed with HTML, CSS, and SVG. However, I'm facing an issue with attaching certain events (such as drop, dragenter, dragleave) to a table, which is represented as a Konva.Group.

My question is: how can I attach these same events to a Konva.Group? Additionally, the draggable element starts from an HTML list and needs to be dropped into a Konva.Group within the canvas layer.

Thank you for your assistance! issue-konva

lavrton commented 1 week ago

Konva doesn't support drop even directly (such as dragenter or dragleave). You can add them by yourself with a little extra code: https://konvajs.org/docs/drag_and_drop/Drop_Events.htm

Here is an example of dropping html element into a canvas: https://konvajs.org/docs/sandbox/Drop_DOM_Element.html