Drag and drop performance issue on product grid

reactioncommerce / reaction

Mailchimp Open Commerce is an API-first, headless commerce platform built using Node.js, React, GraphQL. Deployed via Docker and Kubernetes.

https://mailchimp.com/developer/open-commerce/

GNU General Public License v3.0

12.33k stars 2.17k forks source link

Drag and drop performance issue on product grid #34

Closed bstocks closed 10 years ago

bstocks commented 10 years ago

On Chrome/Mavericks

When dragging a product on product grid performance is noticeably off. The dragged product lags behind mouse movement in jumpy/glitchy movements.

eahefnawy commented 10 years ago

Yes I confirm that. I faced the same issue.

aaronjudd commented 10 years ago

Working through bugs over the next couple days, should get this one resolved soon.

aaronjudd commented 10 years ago

Should be a lot smoother now without placeholders. @bstocks we need docs on the functionality of the grid, here's a few things that need documented.

Grid is grouped by positions (the # on the product)
Product grouping is tag specific (you can change sort/group on main grid, tag grids)
positioning is relative, you can add new products to the same position, and within a group updated date is decider
new products will get sorted/add first

aaronjudd commented 10 years ago

Just a general note to myself:

Goals of drag and drop merchandising:

Products can display in multiple tags(aka categories), sorting of individual is unique to each tag Newest product are given ascending sort, if they haven't been positioned they will go first Sort position is relative, there can be multiple products with a position of 0, most recently updated comes first Updating sort position also makes it have a more recent updated timestamp Sort relativity for other products is maintained when product is added, or deleted

Future: Track products (maintain sort information in purchase history) to determine which position perform best Products can be given a larger "sort" weight, to always have them sort higher in a relative position

aaronjudd commented 10 years ago

Important note: the 'grid' is a columnized list to account for varying height/widths. Easy enough CSS change to have it be a left to right list, but since we're dealing with columns, and don't want to use masonry(et al)... as that's more overhead, this seems to be a decent working solution for now. Certainly plenty of enhancements that could be done.

eahefnawy commented 10 years ago

awesome thanks! I like the sorting by best performing position idea. Would love to see it implemented soon.