Responsive Drag Drop Web Page

[liagapi555]

I have been trying to develop a responsive web page with drag droppable components but I’ve been having problems. So basically I tried to allow dragging and dropping of components with pin point accuracy by creating a relatively positioned drop zone.

Then the droppable components are all given absolute positioning once they are dropped but not before. This way they will stay in the location where they were dropped.

The problem with this is that although the drop zone can be floated which gives it some degree of movements when the screen resolution changes, the absolutely positioned components inside of it will stay put instead of floating to the next line.

Can someone please suggest a solution to solving this problem, thanks.

[rpkamp]

Once an item is dropped you should remove the absolute positioning and just let it use normal flow instead.

That being said, drag and drop is a major headache to get right and I would suggest you get a library to handle it for you.

I’ve used dragula myself and that works wonder. Super small (just a few KB), no dependencies, and relatively easy to set up. Saved me a lot of time!

[Ray.H]

@liagapi555

The problem with this is that although the drop zone can be floated which gives it some degree of movements when the screen resolution changes, the absolutely positioned components inside of it will stay put instead of floating to the next line.

It sounds like your saying they are not following the drop box when it relocates.

Since you have changed them to absolute position, and without seeing your code, I’m going to bet they don’t have any offset values applied to them.

When that is the case, they position from the last spot they were before the page redraws itself.

Try adding offsets

.dropbox {
  float:left;
  position:relative;
}
.droppable {
  position:absolute;
  top:0; left:0; /*add offsets*/
}

Since they are AP, they will all layer on top each other in the top left corner.

If you don’t want that behavior then do as @rpkamp suggested and let them order themselves in the page flow, as blocks within the dropbox which would then expand.