search

prevwong / craft.js

🚀 A React Framework for building extensible drag and drop page editors
https://craft.js.org
MIT License
7.32k stars 705 forks source link

Customizeable drag and drop #618

Open doppelgunner opened 3 months ago

doppelgunner commented 3 months ago

Feature Request

Right now when you drag and drop an element what happens is it just shows red/green area like in the picture below: image

Solution

I want to know if this is possible to be able to see the result when you drop the component. This way we can easily visualize what it would look like before comitting to drop the specific element. image

Check the sample in the link: https://master--5fc05e08a4a65d0021ae0bf2.chromatic.com/?path=/story/presets-sortable-vertical--basic-setup

jjoderis commented 1 month ago

I am currently working on something similar and have achieved an incomplete result which i have copied into this codesandbox. Maybe you can work with that. I'm not sure if this is the correct way to handle this since i'm not that familiar with this library yet. @prevwong is there a better way to change internal logic like the drag and drop behaviour? The problem i had with this solution is that you can't really overwrite one event handler while retaining the other when they are defined in the same command handler.