Woodlands.co.uk Component Library

Sortable

A drag-and-drop sortable list using sortablejs.

For use in the “new” admin area, to reorganise the photos in a set of particulars.

<div class="gallery">
    <ul class="gallery__thumbnails gallery__sortable">
        <li class="gallery__item">
            <div class="media">
                <div class="media__content">
                    <img src="http://picsum.photos/400/225?uniq&#x3D;0" alt="" title="" />
                </div>
            </div>

        </li>
        <li class="gallery__item">
            <div class="media">
                <div class="media__content">
                    <img src="http://picsum.photos/400/225?uniq&#x3D;1" alt="" title="" />
                </div>
            </div>

        </li>
        <li class="gallery__item">
            <div class="media">
                <div class="media__content">
                    <img src="http://picsum.photos/400/225?uniq&#x3D;2" alt="" title="" />
                </div>
            </div>

        </li>
        <li class="gallery__item">
            <div class="media">
                <div class="media__content">
                    <img src="http://picsum.photos/400/225?uniq&#x3D;3" alt="" title="" />
                </div>
            </div>

        </li>
        <li class="gallery__item">
            <div class="media">
                <div class="media__content">
                    <img src="http://picsum.photos/400/225?uniq&#x3D;4" alt="" title="" />
                </div>
            </div>

        </li>
        <li class="gallery__item">
            <div class="media">
                <div class="media__content">
                    <img src="http://picsum.photos/400/225?uniq&#x3D;5" alt="" title="" />
                </div>
            </div>

        </li>
    </ul>
</div>
 
<div class="{{modifier 'gallery' modifiers}}">
    <ul class="gallery__thumbnails gallery__sortable">
      {{#each gallery }}
        <li class="gallery__item">
            {{ render '@media' this merge=true }}
        </li>
      {{/each}}
    </ul>
</div>