# Creating a drag and drop function using custom code **URL:** \ **Category:** How do I?\ **Created:** [September 22, 2023, 9:52am UTC](https://community.weweb.io/t/creating-a-drag-and-drop-function-using-custom-code/4512 "2023-09-22T09:52:30Z")\ **Posts on this page:** 13\ **Page:** 1
**Author:** ![TinnaLT](https://avatars.discourse-cdn.com/v4/letter/t/e99b99/32.png) [@TinnaLT](https://community.weweb.io/u/TinnaLT)\ **Post date:** [September 22, 2023, 9:52am UTC](https://community.weweb.io/t/creating-a-drag-and-drop-function-using-custom-code/4512/1 "2023-09-22T09:52:30Z")
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 🙂 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](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/e/e32ee0989f2a13cc8d6f52cf63288daf3ecb26d2.jpeg) 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. ---
**Author:** ![Broberto](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/broberto/32/5918_2.png) [@Broberto](https://community.weweb.io/u/Broberto)\ **Post date:** [September 22, 2023, 9:55am UTC](https://community.weweb.io/t/creating-a-drag-and-drop-function-using-custom-code/4512/2 "2023-09-22T09:55:17Z")
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. ---
**Author:** ![TinnaLT](https://avatars.discourse-cdn.com/v4/letter/t/e99b99/32.png) [@TinnaLT](https://community.weweb.io/u/TinnaLT)\ **Post date:** [September 22, 2023, 9:56am UTC](https://community.weweb.io/t/creating-a-drag-and-drop-function-using-custom-code/4512/3 "2023-09-22T09:56:53Z")
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 🙂 ---
**Author:** ![Broberto](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/broberto/32/5918_2.png) [@Broberto](https://community.weweb.io/u/Broberto)\ **Post date:** [September 22, 2023, 9:59am UTC](https://community.weweb.io/t/creating-a-drag-and-drop-function-using-custom-code/4512/4 "2023-09-22T09:59:00Z")
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? ---
**Author:** ![TinnaLT](https://avatars.discourse-cdn.com/v4/letter/t/e99b99/32.png) [@TinnaLT](https://community.weweb.io/u/TinnaLT)\ **Post date:** [September 22, 2023, 10:03am UTC](https://community.weweb.io/t/creating-a-drag-and-drop-function-using-custom-code/4512/5 "2023-09-22T10:03:28Z")
(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](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/e/e32ee0989f2a13cc8d6f52cf63288daf3ecb26d2.jpeg) ---
**Author:** ![TinnaLT](https://avatars.discourse-cdn.com/v4/letter/t/e99b99/32.png) [@TinnaLT](https://community.weweb.io/u/TinnaLT)\ **Post date:** [September 22, 2023, 10:04am UTC](https://community.weweb.io/t/creating-a-drag-and-drop-function-using-custom-code/4512/6 "2023-09-22T10:04:03Z")
(2/3) You should be able to drag the elements (card) to the drop-area: ![Image 2](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/7/778d7614612bfd30463b8d46e0c5cd1b073f2729.png) ---
**Author:** ![TinnaLT](https://avatars.discourse-cdn.com/v4/letter/t/e99b99/32.png) [@TinnaLT](https://community.weweb.io/u/TinnaLT)\ **Post date:** [September 22, 2023, 10:04am UTC](https://community.weweb.io/t/creating-a-drag-and-drop-function-using-custom-code/4512/7 "2023-09-22T10:04:41Z")
(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](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/7/7fea64976c3d0236008bd99886d2a4d36a70129a.png) ---
**Author:** ![Broberto](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/broberto/32/5918_2.png) [@Broberto](https://community.weweb.io/u/Broberto)\ **Post date:** [September 22, 2023, 10:04am UTC](https://community.weweb.io/t/creating-a-drag-and-drop-function-using-custom-code/4512/8 "2023-09-22T10:04:44Z")
So far I got this, but where are they gonna get dropped? Is it gonna be dropping into each drop area? ---
**Author:** ![Broberto](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/broberto/32/5918_2.png) [@Broberto](https://community.weweb.io/u/Broberto)\ **Post date:** [September 22, 2023, 10:06am UTC](https://community.weweb.io/t/creating-a-drag-and-drop-function-using-custom-code/4512/9 "2023-09-22T10:06:35Z")
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? ---
**Author:** ![TinnaLT](https://avatars.discourse-cdn.com/v4/letter/t/e99b99/32.png) [@TinnaLT](https://community.weweb.io/u/TinnaLT)\ **Post date:** [September 22, 2023, 10:08am UTC](https://community.weweb.io/t/creating-a-drag-and-drop-function-using-custom-code/4512/10 "2023-09-22T10:08:49Z")
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 🙂 ---
**Author:** ![Broberto](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/broberto/32/5918_2.png) [@Broberto](https://community.weweb.io/u/Broberto)\ **Post date:** [September 22, 2023, 10:10am UTC](https://community.weweb.io/t/creating-a-drag-and-drop-function-using-custom-code/4512/11 "2023-09-22T10:10:49Z")
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/](https://www.linkedin.com/in/rob-hostak/) ---
**Author:** ![TinnaLT](https://avatars.discourse-cdn.com/v4/letter/t/e99b99/32.png) [@TinnaLT](https://community.weweb.io/u/TinnaLT)\ **Post date:** [September 22, 2023, 10:15am UTC](https://community.weweb.io/t/creating-a-drag-and-drop-function-using-custom-code/4512/12 "2023-09-22T10:15:20Z")
Thanks Rob! I’ll add you on LinkedIn ---
**Author:** ![Broberto](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/broberto/32/5918_2.png) [@Broberto](https://community.weweb.io/u/Broberto)\ **Post date:** [September 22, 2023, 10:59am UTC](https://community.weweb.io/t/creating-a-drag-and-drop-function-using-custom-code/4512/13 "2023-09-22T10:59:14Z")
Gotcha!