paper-elements icon indicating copy to clipboard operation
paper-elements copied to clipboard

Element Request: paper-sortable-tiles

Open samccone opened this issue 9 years ago • 9 comments

Use cases:

  • When you have a grid of paper-cards, (click/touch) + drag to reorder is sometimes desirable
  • When you have a paper cards sometimes you want their order to customizable outside of your loop.

Features:

  • sort order arr
  • custom sort by attr
  • drag and drop to update sort order

Thoughts? bad idea? :cold_sweat:

samccone avatar Sep 22 '15 18:09 samccone

My first question is: is this UX pattern something currently in the Material spec, or is this something that would be useful, but isn't listed there?

addyosmani avatar Sep 22 '15 18:09 addyosmani

The pick-up-and-move gesture is also supported. However, consider whether it is important for the user to be able to sort cards within the collection, or if the content would be better organized using programmatic filtering or sorting.

:) :)

samccone avatar Sep 22 '15 18:09 samccone

I think the MD spec actually supports the pick-and-move gesture (https://www.google.com/design/spec/components/cards.html#cards-behavior), so this isn't a bad idea. However, much like iron-swipeable-container, I don't think this feature should be limited to just paper-cards (I can see a scenario where you want to pick and move <div>s), so maybe it should be an iron-drag-and-drop-container.

Which brings us to the jar of spiders that is drag-and-drop, and me throwing the hot potato to @kevinpschaaf, who's looked at it before. TL DR: this is hard to get right and not slow and janky.

notwaldorf avatar Sep 22 '15 18:09 notwaldorf

I think the MD spec actually supports the pick-and-move gesture (https://www.google.com/design/spec/components/cards.html#cards-behavior), so this isn't a bad idea.

Awesome!

so maybe it should be an iron-drag-and-drop-container.

:+1: On not limiting it to cards. I can see folks wanting to pick and move arbitrary content if this is supported.

addyosmani avatar Sep 22 '15 18:09 addyosmani

so maybe it should be an iron-drag-and-drop-container.

:+1: I would love to have a iron-drag-and-drop-container.

chuckh avatar Sep 22 '15 19:09 chuckh

Could this be Draggable and Droptarget behavior?

zoechi avatar Oct 21 '15 17:10 zoechi

I think the MD spec actually supports the pick-and-move gesture (https://www.google.com/design/spec/components/cards.html#cards-behavior), so this isn't a bad idea. However, much like iron-swipeable-container, I don't think this feature should be limited to just paper-cards (I can see a scenario where you want to pick and move <div>s), so maybe it should be an iron-drag-and-drop-container.

Which brings us to the jar of spiders that is drag-and-drop, and me throwing the hot potato to @kevinpschaaf, who's looked at it before. TL DR: this is hard to get right and not slow and janky.

Sounds really really good!

abdonrd avatar Oct 21 '15 17:10 abdonrd

As a tracking side note, iron-swipeable-container is now a thing (no drag-drop support): https://github.com/PolymerElements/iron-swipeable-container

notwaldorf avatar Nov 12 '15 20:11 notwaldorf

http://demos.telerik.com/kendo-ui/sortable/linkedlists for trello like user interface or http://demos.telerik.com/kendo-ui/sortable/sortable-panels for dashboard (arranging google analytics widget)

andrew-vdb avatar Sep 01 '16 07:09 andrew-vdb