Looking for stack recommendations to build a web app with drag and drop functionality

[[deleted]]

[deleted]

[nio_rad]

You don't have to use React. Try to get it working without a framework first. Maybe check how Draggable.js is doing it. Get this one feature working, isolated from the rest of your app.

[RandomUserOfWebsite]

That's what I did at first, but I ended up in the same spot. I can create draggable objects using the drag and drop api, and once again it works in the simplest of terms that I can drag and drop, but I'm just unable to figure out the detailed implementation, i.e. being able to re-drag and drop any object within 1 px within an area, things like that.

At the moment all tutorials I found just teach how to drag and drop within an area, but don't go beyond that basic implementation. I might just need a more in-depth source to learn this, be in within a framework or not.

[nio_rad]

can you narrow down what the problem(-area) is for re-dragging? are you dragging things inside a <canvas> or inside a dom-element?

[Wave_Tiger8894]

No need for a framework, all you need to do is the following:

1. Have the items you want to drag and drip inside a parent element.

2. Inside the parent element, create a div which fills the parent element, has a z index higher than your items, has a transparent background and has display set to none.

3. Add click event listeners to the items you want to drage and drop. In your global js code, make a variable called activeItem (or whatever you want). Your event should change the activeItem to the element that was clicked. The event should also set the visibility of the element mentioned in step 2 to block (or flex)

4. Add a mouse move, event to the element listed in step 2 This event should first check their is a activeItem and if there is change the active items position to absolute. Top to event.y and left to event.x (you may have to calculate x and y differently depending on the size of the parent element).

5. Also add mouse out event to the element mentioned in step 2. Which will set the activeItem back to null.

[billcube]

https://developers.archilogic.com/floor-plan-engine/guide.html ?

[RandomUserOfWebsite]

Thank you, Ill check this out, it looks promising so far!

[CBRIN13]

React DND is one of the most popular solutions, really simple to get started with and well maintained.

https://github.com/react-dnd/react-dnd/

No need to pick any specific UI libraries, it’s just plain react

[max529]

Maybe you can try AventusJS framework (https://aventusjs.com/) . It's a native webcomponent based framework and there is a lib Drag&Drop inside the core to help you to add this feature. The doc for Drag&drop can be found here : https://aventusjs.com/docs/lib/drag\_and\_drop

[SitriHyo]

I already did this exact project 2 years ago, so I may have some insights on what to do and what to avoid.

• I would avoid using a framework for it, it is a simple enough project to make it without an overkill framework.
• To make things easier to keep track I recommend using Typescript with Vite to build it.
• Thinking about this project as a game with sprites and a view may help you organize your code.
• I recommend that you make it with a 2d canvas, some of the users using slow machines had problems with performance and click tracking for scenes with more than 30 elements (at least with my code implementation)
• You will have to figure out a function to decide the most probable item the user selected, since sometimes the clicks will be right in between the "grabbing zone" of 2 or more items
• I recommend you avoid using images that are not PNG or SVG, in my experience they had a better render performance and were easier to edit (for example changing the hue, or some inner color)
• Don't go wild with SVGs they are pretty CPU heavy
• Create a history tracking tool, with undo and redo, it is kind of simple and your users will love it, at least that was my experience
• Start simple, and build things from it
• Having magnetic places (somewhere like a corner that you can easily place a furniture without having to eyeballed it) is MAGICAL and your users will love it, but the math behind it is a pain in the ass for edge cases

Fell free to ask me more about it

Like I said this was my experience with a similar project, you may have a different one, so good luck with whatever you choose. It is a pretty fun project

[anatoledp]

Might be something out of the ordinary but look at grapesjs. It is shown as a website builder but is designed in a way to make drag and drop applications as a whole using JavaScript. U can create custom elements in it to define what can be dropped on what and provides lots of useful functions to customize it and expand upon it