How to add drag-and-drop behavior to a Plasmic design?

Hello, thanks for Plasmic, its really great and I’m now getting into implementation!

Anyways, question, is there any way to create a draggable section using plasmic? I am using the codegen route and am building a Nextjs app, its a single page app style and I am working on some high level layout at the moment, so I am working on a right side panel that is draggable similar in nature to how the plasmic app itself is drag-able on the left side panel where plasmic shows the names and hierarchy of all the page elements and components. I have looked through the documentation and I didn’t see anything.

My guess is for this type of thing I am going to need to go ahead and find another library to utilize in the project, but I wanted to check with you guys to make sure I wasn’t missing anything!

Also I will want to be dragging and dropping other elements similar to how you can drag and drop elements or components in the same plasmic section, ie move/drag X item in this row up and then it saves, I am thinking once again that I will need libraries for this beacuase its starting to get into user state and then saving to the database etc.

Just wanted to touch base and see what the boundaries are with Plasmic or if you guys had any insights into that type of thing and how it relates to Plasmic.

Thank you very much indeed!

Hi @ill_earthworm! There isn’t anything built-in to Plasmic to create drag-and-drop interactions, so yes, you would need to register accomplish this with code components (possibly with custom behavior components)

Ok, cool, so to expand on this area a bit more; if I create a component in plasmic, can i add this type of drag and drop or drag type behavior in the created components that are generated by plasmic and appear in my VS-Code file folder structure?

So I have it all connected up through the command line interface (docs worked great for me) and I am seeing components I created show up in the ‘components’ folder which is adjacent to the ‘plasmic’ folder ---- my basic understanding at this point is that everything that shows up in the plasmic folder is plasmic machine code land and to not touch that ---- but then the components that show up in the components folder are able to be edited in order to effectuate the necessary changes. (There are great comments auto generated by plasmic in these components that lead me to believe this)

Is there any limitations on what I can put in here? Or is it basically whatever you can put in any component?

Does this description sound pretty close to accurate? Or am I missing anything?

hopefully this line of questioning can help others as well!

Correct - if you’re using codegen, it’s a more advanced way of using Plasmic than the headless API: https://docs.plasmic.app/learn/loader-vs-codegen/

And you can learn more about how exactly to work with the codegen’d components, whose wrappers - as you determined - you are able to edit: https://docs.plasmic.app/learn/codegen-components/