Drag and Drop for Visual Editing - Developer Deep Dive with George Francis
George Francis has implemented the new drag and drop solution for Sanity's Presentation tool which gives you visual editing for structured content. With this, you can make page builders and layout systems on top of flexible and reusable content models, without compromising on the editing experience.
Learn how George implemented ray-casting to make it possible to enable drag and drop right in the front end with a minimal DX footprint: You only need to annotate your array elements with a data-attribute and send the data through a hook to enable optimistic updates in preview. It's pretty magical!
👉 Learn more about Sanity's Winter Release: https://www.sanity.io/release
👉 Visual editing documentation: https://www.sanity.io/docs/introducti...
👉 Demo of how ray-casting works: https://codepen.io/georgedoescode/pen...
👉 Demo of how overlays works: https://codepen.io/georgedoescode/pen...
00:01 Introduction
00:53 New Features
02:22 Overlay Mechanics
03:30 Drag and Drop
08:07 Real-time Update
09:31 Custom Overlays
11:31 Conclusion