Creating a drag and drop function using custom code

Ask us anything How do I?
1

Hi,

I’m new to WeWeb, so I’m still a bit confused on where to put what type of code etc., so I’m hoping you can help me out, since I can’t get it to work :slight_smile:

What I’m trying to do is add a drop and drag function using custom code (HTML, CSS & Javascript) to the drop down menu’s elements:

Untitled
Untitled1399×783 203 KB

You should be able to drag the elements (card) to the drop-area

On the drop-area I want it to change from the card into the actual element e.g. a text box, that can also be drag around on the drop-area.

For context what I’m building is a project management software for creative professionals. So the idea is to have different elements like a text box, moodboard, mindmap, images etc., so that the users can set up what they need for each project.

2

You can try Kanban element, or you could use sortable.js, I’ve done a custom component for this. It’s not that simple tho. Kanban might work for you maybe though. But I think you’d need custom components for this.

3

Hi,

Thanks! I’ve tried using Kanban but it’s to simple for my need.
So I do need to use custom code - I’m just not sure where to put what type of code :slight_smile:

4

For now it’s not that simple to implement custom code into WeWeb. You can check some threads here in the forum via Search, but it’s not really as simple as pasting some code. I’m not sure what your background is. I’m still kinda not understanding your needs either, could you describe more/send some screens on how it is supposed to work?

5

(1/3)

Here’s some more screenshots, if that helps:

I want to add a drop and drag function using custom code (HTML, CSS & Javascript) to the drop down menu’s elements:

Untitled
Untitled1399×783 203 KB

6

(2/3)

You should be able to drag the elements (card) to the drop-area:

Image 2
Image 21118×820 42 KB

7

(3/3)

On the drop-area I want it to change from the card into the actual element e.g. a text box, that can also be drag around on the drop-area:

Image 3
Image 31164×711 40.3 KB

8

So far I got this, but where are they gonna get dropped? Is it gonna be dropping into each drop area?

9

I mean, it could be done, but at this point, I think you’d be better off with some custom development, or hiring someone to make this happen in WeWeb, because it would require a lot of custom code in my opinion.

What is the main reason you want to have this in nocode?

10

Yes, with time I’ll get it build in Python, once I can afford hiring a team.
Right now I’m building the first version in no-code to save time and money.

Some of the elements I want, I’ll still need to use code to create - which is not an issue.
I just need to figure out where to put what code :slight_smile:

11

I think you might want to look into Custom Components, it’s not well documented yet, but there is a lot of resources. I’ve done a drag and drop scheduler for a client, but this sounds even more complex, because I’m guessing you’ll want to nest things also. I’d be interested into helping you along your journey though, this seems like a cool use of WeWeb. If you would like to link up, you can contact me on LinkedIn and we can schedule a meeting to discuss this. Free of charge of course, I’m just really interested into this. https://www.linkedin.com/in/rob-hostak/

12

Thanks Rob!

I’ll add you on LinkedIn

1 Like
13

Gotcha!