How to make a draggable list?

Developer Support
1

Hi, everyone

I have one question.
I would like to make a draggable list.

like this
https://reactjsexample.com/a-simple-draggable-list-component-for-react/

In my app, assigned a components to a slot target on the vertical stack.

However, in react-drag-listview and other similar packages, we must use the list component they provide.

Do you have any ideas for creating a draggable list in an app created using Plasmic?

2

Hi @dirty_eel,
You can register those list components as code components and use them in Studio. You can learn more about code components here.
https://docs.plasmic.app/learn/code-components/

3

I can create a video to achieve a draggable list using one of the react libraries but it will take me some time to compile it.

4

Meanwhile, If you are new to Plasmic, you can watch the following video on How to Register Code Components.

https://www.youtube.com/watch?v=v8R0NwedW_4

5

Hi Asim.
Thanks for the reply.

I had avoided the code component because I thought it would be too complicated, but I should still try it.
Will give it a try based on your video!

thank you.

6

@zonal_mammal
I used codecomponent to place a draggable list component on Plasmic.

However, I found it difficult to work with the designer because the components were not available when the local server was not running.

Should we set up a server in the cloud for codecomponent?
Or is there another solution?
Please let me know if you have any ideas.

7

@dirty_eel,
Yes, you would need to deploy your project to a particular server on cloud. I have used vercel and netlify for different projects. It’s easy to deploy the project over there and they provide free credits as well.

Let’s say we deploy it to a domain [www.example.com](http://www.example.com) , we can then add this domain inside the Plasmic project as app host as [www.example.com/plasmic-host](http://www.example.com/plasmic-host)

8

Thank you for repling me.
I decided to deploy to GCP.

Let me ask one more additional question.

I would like to maintain a separate repository for code components from the service repository.

So I have published https://code-components-epxpqlwzrq-an.a.run.app/plasmic-host and linked it to Plasmic.

It works fine on Plasmic, but there is a problem with the components in the service repository published from Plasmic.

When I used the component included in code-components, the path looked like this

import { DragListView } from ". /... /... /... /components/DragListView"; // plasmic-import: weFnPwWswI/codeComponent

A normal component path would look like this
import SideBarBookTitle from ". /.... /SideBarBookTitle"; // plasmic-import: cpDlPT0ZyV/component

I am getting broken relative paths, how can I address this issue?

9

hi @dirty_eel,
Ideally, to separate out the repository of code-components, I would opt for creating an npm package out of it. It will help in importing those code-components in multiple projects. After creating the npm package, you can then simply register all of the code components using single import inside your plasmic-host file

import {registerAll} from "your-npm-package"

registerAll()

For more details on this architecture, you can study the public libraries of plasmicpkgs, here is an example of antd code components by Plasmic
https://github.com/plasmicapp/plasmic/tree/master/plasmicpkgs/antd

Coming to the above problem you have shared, it might be because of the following reason.

  1. Code component consider it’s import path from the importPath property we define in registerComponent function call.
  2. It considers the import path relative to the srcDir
    So, it mighe be the case that code components take that long path from the src directory of separate respository and it conflicts with the src directory of the service respository.

Can you please provide the following information if possible.

  1. Directory structure of the code component in the separate repo.
  2. importPath provided in the registeration of DragListView code component

P.S
I would still recommend to opt for private npm package. Let me know if you go for npm package approach and have any questions regarding that approach.

10

@zonal_mammal
I see, as you pointed out, we felt that the npm package would be easier to manage.

I will ask again if you have any questions as we are trying things out.

Thank you very much.

11

Hi @zonal_mammal
I would like to ask you a question again.:sob:

I want to set up an event for a component within a component, but I get an error in TypeScript.

One idea I had was to convert addStock to Slot and set <AddStock onClick~~~~~ /> in the page.

However, I feel it would be inefficient to go through the trouble of generating it.

Is there any better way to access the subcomponents?

this is my plasmic project.
https://studio.plasmic.app/projects/jRkyHyW5xUgunu5SjYQV4L

image.png

12

Hi @dirty_eel,
I think Plasmic team can share better insights on this. Unfortunately, I haven’t used much of typescript projects so I couldn’t figure out the issue on my end as well. It seems like the nested component types aren’t exposed properly.

13

If it’s blocking you from build deployment and you are certain about your code. You can add a ts-ignore on top of addStock as a quick fix

// @ts-ignore
addStock: {
  
}

CC: @dirty_eel