Join Join
Join

063Long-press reorder rail

A “utilities” category effect. It’s never easy to build a list of items that can be freely reordered. That’s why we created this effect. After each reordering, an event is triggered so you can decide what to do next. Shall we take a look?

HTML Structure

The section wraps a short caption and a horizontal row of items. Each slot is a wrapper around one image so we can re-parent the whole unit when the order changes:

<section class="mwg_effect063">
    <p>
        <span>Drag and Drop to reorder</span>
        <span>Long press an item to pick it up, then drag to reorder the list.</span>
    </p>
    <div class="container">
        <div class="media">
            <img src="assets/medias/01.png" alt="">
        </div>
        <div class="media">
            <img src="assets/medias/02.png" alt="">
        </div>
        …
        <div class="media">
            <img src="assets/medias/10.png" alt="">
        </div>
    </div>
</section>

We pan the strip with a swipe, then long-press an item to lift it and drag it into a new position — neighbours step aside until we release and the list commits the new order.

Become a member to unlock
the full effect today.

Join now Join now

Discover the platform

See how the platform works: try Effect #000 for free.

Try it now Try it now

(No registration or credit card needed)