search

briangonzalez / jquery.pep.js

👟 Pep, a lightweight plugin for kinetic drag on mobile/desktop
http://pep.briangonzalez.org
1.3k stars 178 forks source link

Pep Collapsing table when selecting td #192

Open wailer247 opened 7 years ago

wailer247 commented 7 years ago

I've been working on a drag and drop system which has been working great so far. However, I have now added a table to the drag and drop system, which for some reason breaks the pep.js plugin. Can anyone help me figure out why? I've set up this codepen showing how to drag the entire table. However, this is not the behavior I want. I need to be able to drag around individual td's. Please change the jquery selector to td in the codepen and you will see that the table collapses.

pixelplant commented 7 years ago

Hello wailer247

I am not the developer of pep, but from what I see this is normal behavior. Elements get moved with either css transforms or position:absolute, so having td's that break from the initial table seems normal to be.

What are you actually trying to achieve?

pixelplant commented 7 years ago

As a sidenote, if you just want to keep the table "whole" until you stard dragging your tds, make sure you add the option deferPlacement: true to your call, like in this modified example of yours: http://codepen.io/nekosan/pen/LRjJRj

But once you move all the td's from inside the table the table gets broken.

wailer247 commented 7 years ago

I tried using deferPlacement: true, but that doesn't solve what I'm trying to do here. I need the tds to stay where they are, and revert to their original place in the table unless they are dropped on an activeDropRegion. I've modified the codepen here with place:false and a custom easing function. However, in the example I've linked they instead revert to their new position each time, instead of to their original position on the page.

EDIT: I modified the codepen again here, and removed the custom easing function, since it wasn't doing what I wanted. Apparently this has to do with setting the tds to position:relative, but if I change the position to anything else, it breaks any easing I have set on it.