rackerlabs / canon

A front-end framework for fast & consistent development of Rackspace UIs.
http://rackerlabs.github.io/canon/
Other
30 stars 22 forks source link

Drag and drop table rows #144

Open alainacoppa opened 9 years ago

alainacoppa commented 9 years ago

CDN has a need for drag and drop table rows and I believe @annwa also needs it for MyRack. I have a design and desired behavior below.

How many CPs would want to use this before it would be considered as a Canon pattern? If we don't want it as a Canon pattern now, is there anything that I should try to communicate to the Backups team in terms of how it's built so that it can be more easily incorporated later?

Similar behavior to this: http://jqueryui.com/sortable/#placeholder

@annwa also interested in any design feedback.

bradgignac commented 9 years ago

Seems like this is fine to go in. From a Canon perspective, it looks like this is mostly a new icon.

bradgignac commented 9 years ago

It would be worth knowing how this impacts accessibility before making this a recommendation.

alainacoppa commented 9 years ago

@bradgignac agreed about the accessibility. @annwa do you think it would be enough to just add keyboard support? Similar to: http://test.cita.illinois.edu/aria/draganddrop/draganddrop1.php Or do you think there needs to be full alternative way of moving items?

annwa commented 9 years ago

so that example is really difficult. i had a really hard time moving things around and if you had to guess how it operated without any visual cues i think you'd be really lost. heck, even with visual instructions i was like waaaaat?

i'm not 100% on best practices for things like this but i'm down to look into it.

i think an easy way to reorder things is to put hidden buttons that say something like "move item up one row" or "move item down one row". how that affects sighted keyboard users, we'd have to look into it

alainacoppa commented 9 years ago

@annwa I agree that that example was challenging. I was hoping that our task would a lot easier because it's just select + up/down. Hidden buttons are an interesting idea too.