Server Action on drag-and-drop
Answered
Plott Hound posted this in #help-forum
![Avatar](https://cdn.discordapp.com/embed/avatars/2.png)
Plott HoundOP
How can I programmatically trigger a form submission, or similarly, send data to a server, in the onDragEnd event handler of a drag-and-drop interaction in Next? I’m using Next.js 14 and would like to know the best approach to invoke a Server Action when the user completes a drag-and-drop action.
Answered by Plott Hound
solution:
const handleDragEnd = async (event: DragEndEvent) => {
const res = await serverAction(payload)
}
8 Replies
![Avatar](https://cdn.discordapp.com/avatars/738636301393330228/11356cf975fc227ae207bfea0ce954e5.webp?size=256)
Param san
![Image](https://cdn.discordapp.com/attachments/1180948104019722280/1180956267074834442/Screenshot_20231204-010802_Chrome.png?ex=657f4e3b&is=656cd93b&hm=c2b0f335e721cbfe5c978f9763ff59e32093e6c4ccc1814a16c849b6b5799ea1&)
Call a server action function to send data to the server.
@Plott Hound Hope you find the answer helpful.
![Avatar](https://cdn.discordapp.com/embed/avatars/2.png)
Plott HoundOP
Thanks for replying. I’ll give this a try in the morning and get back to you
![Avatar](https://cdn.discordapp.com/avatars/738636301393330228/11356cf975fc227ae207bfea0ce954e5.webp?size=256)
Param san
Sure 😄
You can DM me
![Avatar](https://cdn.discordapp.com/embed/avatars/2.png)
Plott HoundOP
I’ve prepared the form data payload and made the server action. I just usually submit forms with <form action.. I’ve not done it with a payload in my function:
const handleDragEnd = (event: DragEndEvent) => {
const handleDragEnd = (event: DragEndEvent) => {
![Avatar](https://cdn.discordapp.com/embed/avatars/2.png)
Plott HoundOP
solution:
const handleDragEnd = async (event: DragEndEvent) => {
const res = await serverAction(payload)
}
Answer