How to drag non-block elements on canvas and trigger actions

[protozoo]

Hi again!

I'm building a feature where users can drag elements from a sidebar onto the canvas, but these elements are not blocks (and therefore won't get added to the canvas as elements). The idea is that these elements, when dragged onto existing components, will trigger an action (i.e. change the value of a trait, show a dialog with options, etc...).

Is there a way to do this? I've set the draggable attribute to the elements in my sidebar but when I drag them onto the canvas the behavior is as if I was to add them just as any block/component. I.e. while moving the dragged element around the canvas, I see the default orange box around the element to receive the dropped element and the default green "cursor" indicating where the new component will be dropped.

Pasting a screenshot of the default "drag-block-onto-canvas" actions to illustrate what I refer to as "orange box" and "green cursor". In my implementation I would not be dragging blocks such as the "1 column" depicted one

For instance, from my sidebar I'd like to drag an item onto a component. This will open a dialog offering options to change properties of such button (i.e add a css class, change the value of a trait, etc).

Thanks in advance!

[lexoyo]

Hi
I don't think it is related to grapesjs
Why not use js to detect a drop and then use grapesjs API ?

https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/drop_event

[protozoo]

Thanks @artf . Looks like I didn't make myself understood. I already solved my need of adding components from external elements (thanks to your reply in the other discussion I opened).
What I'm asking here is not about adding elements (new components to the canvas), but the ability to drop stuff onto existing components and then react to it with custom logic.

Please consider the example I gave above:

For instance, from my sidebar I'd like to drag an item onto a component. This will open a dialog offering options to change properties of such button (i.e add a css class, change the value of a trait, etc).

The goal is to use drag-and-drop interactions to change properties of components already existing in the canvas.

Many thanks again for your help

[artf]

well @protozoo I guess it's up to your dropped custom component to decide what to do when it's created which is really similar to what we have already discussed here #5261 not sure how else I can help you here

[protozoo]

Hi again @artf . I don't want to drop components on the canvas this time. In the feature I am implementing now, I need to allow the user to drag other items (they are not components, they won't get added to the canvas) on top of existing components. So perhaps I am not expressing my question properly, apologies if so. Let me try to rephrase it: is there a way to detect when the user is dragging something different than a component from outside the canvas, so that:

1. as the user moves the mouse around the canvas while dragging this external thing (again: it's not a component), before dropping it, the canvas does not show the green mark which is usually used to know where the new element will be positioned when dropped, but it does show the orange one use to indicate the component that would become the dropped element container (if I was to add a new component, which I am not)
2. when the user finally releases the drag-and-drop, nothing gets added to the canvas and I can know which existing component received the drop

Sorry if I'm not making myself clear. I am currently trying to implement it using my own custom drag events but I thought it could be possible to use grapes' current methods and events.

Thanks again!

[artf]

Yeah @protozoo I got it... what I'm trying to explain to you is in order to make use of the default canvas D&D mechanism you have to drop a component, there is no easy way around it right now.

To handle the "hide the green mark" problem, you can simply toggle a CSS (eg. targeting .gjs-placeholder) when you start/end the drag of your custom elements.
For the component itself, once it's dropped/created you can simply select the parent, open your dialog and then remove the dropped component.

[protozoo]

Oops, sorry forgot to reply here. Yes thanks, I solved following this advice.