Home > Hot in web development > Quick Tip: User Sortable Lists with Flexbox and jQuery

Quick Tip: User Sortable Lists with Flexbox and jQuery

In this article, we’ll learn, step-by-step, how to build a simple jQuery plugin which sorts elements based on the values of their custom data attributes.

If you’re curious about the end result, have a look at the corresponding CodePen demo:

Note: This article assumes you have a basic understanding of flexbox, as well as how to develop jQuery plugins. If you aren’t familiar with these topics, be sure to check out the links.

Accessibility Concerns

To build our plugin, we’ll take advantage of flexbox’s power.

By default, flex items are laid out according to their source order. But, by using the order property, we’re able to change their order inside the parent flex container. Items with lower order values appear first. See an example below:

If there are more than one items with same order values, the order for these items depends on their source order.

Although the order property allows us to easily reorder elements, it comes with an accessibility limitation: it creates a disconnection between the source order and the visual order. To better understand the problem, take a look at this article (especially at the “Source Order vs. Visual Order” section).

So, before moving on to examine how to build our plugin, please note that it won’t be accessible.

Read Full Article

The WebRecital is a dedicated User Interface/User Experience professionals who come together to provide design and research workshops, portfolio reviews, and educational outreach to the greater Seattle area.

Leave a Reply

Your email address will not be published. Required fields are marked *