メインコンテンツへスキップ

ドキュメント

ソータブル

要素の順序を並べ替えるためのソータブルなグリッドとリストを作成します。

ソータブルなグリッド内で要素を新しい場所にドラッグアンドドロップすると、他のアイテムが合わせて調整されます。これは、ギャラリーやメニュー項目などのアイテムを並べ替えたい場合に最適です。

使用法

このコンポーネントを適用するには、コンテナにuk-sortable属性を追加し、子要素を作成します。

<div uk-sortable>
    <div></div>
    <div></div>
</div>
    • アイテム 1
    • アイテム 2
    • アイテム 3
    • アイテム 4
    • アイテム 5
    • アイテム 6
    • アイテム 7
    • アイテム 8
  • <ul class="uk-grid-small uk-child-width-1-2 uk-child-width-1-4@s" uk-sortable="handle: .uk-card" uk-grid>
    <li>
        <div class="uk-card uk-card-default uk-card-body uk-text-center">Item 1</div>
    </li>
    <li>
        <div class="uk-card uk-card-default uk-card-body uk-text-center">Item 2</div>
    </li>
    <li>
        <div class="uk-card uk-card-default uk-card-body uk-text-center">Item 3</div>
    </li>
    <li>
        <div class="uk-card uk-card-default uk-card-body uk-text-center">Item 4</div>
    </li>
    <li>
        <div class="uk-card uk-card-default uk-card-body uk-text-center">Item 5</div>
    </li>
    <li>
        <div class="uk-card uk-card-default uk-card-body uk-text-center">Item 6</div>
    </li>
    <li>
        <div class="uk-card uk-card-default uk-card-body uk-text-center">Item 7</div>
    </li>
    <li>
        <div class="uk-card uk-card-default uk-card-body uk-text-center">Item 8</div>
    </li>
</ul>

ハンドル

デフォルトでは、ソータブル要素全体をドラッグアンドドロップのソートに使用できます。代わりに使用するハンドルを作成するには、属性にhandle: SELECTORオプションを追加し、ハンドルとして使用する要素にハンドルクラスを追加します。

<ul uk-sortable="handle: .uk-sortable-handle">
    <li>
        <div class="uk-sortable-handle"></div>
        …
    </li>
</ul>
    • アイテム 1
    • アイテム 2
    • アイテム 3
    • アイテム 4
    • アイテム 5
    • アイテム 6
    • アイテム 7
    • アイテム 8
  • <ul class="uk-grid-small uk-child-width-1-2 uk-child-width-1-4@s" uk-sortable="handle: .uk-sortable-handle" uk-grid>
    <li>
        <div class="uk-card uk-card-default uk-card-body">
            <span class="uk-sortable-handle uk-margin-small-right uk-text-center" uk-icon="icon: table"></span>Item 1
        </div>
    </li>
    <li>
        <div class="uk-card uk-card-default uk-card-body">
            <span class="uk-sortable-handle uk-margin-small-right uk-text-center" uk-icon="icon: table"></span>Item 2
        </div>
    </li>
    <li>
        <div class="uk-card uk-card-default uk-card-body">
            <span class="uk-sortable-handle uk-margin-small-right uk-text-center" uk-icon="icon: table"></span>Item 3
        </div>
    </li>
    <li>
        <div class="uk-card uk-card-default uk-card-body">
            <span class="uk-sortable-handle uk-margin-small-right uk-text-center" uk-icon="icon: table"></span>Item 4
        </div>
    </li>
    <li>
        <div class="uk-card uk-card-default uk-card-body">
            <span class="uk-sortable-handle uk-margin-small-right uk-text-center" uk-icon="icon: table"></span>Item 5
        </div>
    </li>
    <li>
        <div class="uk-card uk-card-default uk-card-body">
            <span class="uk-sortable-handle uk-margin-small-right uk-text-center" uk-icon="icon: table"></span>Item 6
        </div>
    </li>
    <li>
        <div class="uk-card uk-card-default uk-card-body">
            <span class="uk-sortable-handle uk-margin-small-right uk-text-center" uk-icon="icon: table"></span>Item 7
        </div>
    </li>
    <li>
        <div class="uk-card uk-card-default uk-card-body">
            <span class="uk-sortable-handle uk-margin-small-right uk-text-center" uk-icon="icon: table"></span>Item 8
        </div>
    </li>
</ul>

グループ

あるリストから別のリストにアイテムをソートできるようにするには、各リストのuk-sortable属性にgroup: GROUP-NAMEオプションを追加してグループ化できます。

<div uk-sortable="group: my-group">
    <div></div>
</div>

<div uk-sortable="group: my-group">
    <div></div>
</div>

  • グループ 1

    アイテム 1
    アイテム 2
    アイテム 3
    アイテム 4

    グループ 2

    アイテム 1
    アイテム 2
    アイテム 3
    アイテム 4

    空のグループ

  • <div class="uk-child-width-1-3@s" uk-grid>
    <div>
        <h4>Group 1</h4>
        <div uk-sortable="group: sortable-group">
            <div class="uk-margin">
                <div class="uk-card uk-card-default uk-card-body uk-card-small">Item 1</div>
            </div>
            <div class="uk-margin">
                <div class="uk-card uk-card-default uk-card-body uk-card-small">Item 2</div>
            </div>
            <div class="uk-margin">
                <div class="uk-card uk-card-default uk-card-body uk-card-small">Item 3</div>
            </div>
            <div class="uk-margin">
                <div class="uk-card uk-card-default uk-card-body uk-card-small">Item 4</div>
            </div>
        </div>
    </div>
    <div>
        <h4>Group 2</h4>
        <div uk-sortable="group: sortable-group">
            <div class="uk-margin">
                <div class="uk-card uk-card-default uk-card-body uk-card-small">Item 1</div>
            </div>
            <div class="uk-margin">
                <div class="uk-card uk-card-default uk-card-body uk-card-small">Item 2</div>
            </div>
            <div class="uk-margin">
                <div class="uk-card uk-card-default uk-card-body uk-card-small">Item 3</div>
            </div>
            <div class="uk-margin">
                <div class="uk-card uk-card-default uk-card-body uk-card-small">Item 4</div>
            </div>
        </div>
    </div>
    <div>
        <h4>Empty Group</h4>
        <div uk-sortable="group: sortable-group"></div>
    </div>
</div>

カスタムクラス

ドラッグ中にアイテムに1つ以上のカスタムクラスを適用することもできます。そのためには、属性にcls-custom: MY-CLASSオプションを追加します。

<ul uk-sortable="cls-custom: my-class">…</ul>

注 この例では、ナビゲーションコンポーネントのナビを使用しています。アイテムをドラッグすると、ボックスシャドウと背景が付与されます。

  • <ul class="uk-nav uk-nav-default uk-width-medium" uk-sortable="cls-custom: uk-box-shadow-small uk-flex uk-flex-middle uk-background">
    <li class="uk-active"><a href="#">Active</a></li>
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
</ul>

コンポーネントオプション

これらのオプションは、コンポーネント属性に適用できます。複数のオプションはセミコロンで区切ります。詳細はこちら

オプション 値 デフォルト 説明
グループ 文字列 グループ
アニメーション 文字列, ブール値 slide アニメーションモード (slide, false)。
duration 数値 250 アニメーションの継続時間 (ミリ秒単位)。
threshold 数値 5 ドラッグを開始するまでのマウス移動のしきい値。
cls-item 文字列 uk-sortable-item アイテムのクラス。
cls-placeholder 文字列 uk-sortable-placeholder プレースホルダーのクラス。
cls-drag 文字列 uk-sortable-drag ゴーストのクラス。
cls-drag-state 文字列 uk-drag ボディのドラッグクラス。
cls-base 文字列 uk-sortable リストのクラス。
cls-no-drag 文字列 uk-sortable-nodrag このクラスを持つ要素のドラッグを無効にします。
cls-empty 文字列 uk-sortable-empty 空のリストクラス。
cls-custom 文字列 ゴーストのカスタムクラス。
handle 文字列 false ハンドルセレクター。

JavaScript

JavaScriptコンポーネントの詳細をご覧ください。

初期化

UIkit.sortable(element, options);

イベント

このコンポーネントがアタッチされた要素で、次のイベントが発生します

名前 説明
start ドラッグ開始後に発生します。
stop ドラッグ停止後に発生します。
moved 要素が移動された後に発生します。
added 要素が追加された後に発生します。
removed 要素が削除された後に発生します。