コンポーネントにドラッグアンドドロップの順序を追加する

Joomla Hello Worldチュートリアルに基づいて小さなコンポーネントを開発しましたが、今では、他の多くのJoomlaコンポーネントに含まれているのと同じドラッグアンドドロップの並べ替えを実装したいと思います。

最初の列で並べ替えることにより、各テーブル行をドラッグして位置を変更できます。

Joomlaにこの機能を追加するネイティブな方法はありますか、それとも自分でプログラムする必要がありますか？

正しい方向へのナッジは高く評価されます。

いくつかの前提条件があり、ビューテンプレートにいくつかの変更を行う必要があります。ただし、この機能をすべて自分で開発する必要はありません。

前提条件

• データベーステーブルに対してINT型の列順序が必要です。
• リストビューは既にソート可能である必要があります（テーブルの列ヘッダーをクリックして）

修正

これは、ドラッグアンドドロップでテーブル行をソート可能にするための最も重要な部分です。

JHtml::_('sortablelist.sortable', 'itemList', 'adminForm', strtolower($listDirn), $saveOrderingUrl);

テーブルがデータベーステーブルの列の順序でソートされている場合にのみ、アクティブにする（つまり、上記の行を実行する）必要があります。テーブルがどの列でどの方向にソートされているか（ASCまたはDESC）を調べる必要があります。default.phpの先頭でこれを実行します。

$listOrder = $this->escape($this->state->get('list.ordering'));
$listDirn  = $this->escape($this->state->get('list.direction'));

テーブルが列の順序で並べられているかどうかを確認します

$saveOrder = $listOrder == 'a.ordering';

$ saveOrderがtrueの場合、ドラッグアンドドロップでテーブル行をソート可能にします。com_exampleをコンポーネント名に、task = items.saveOrderAjaxの「items」をリストコントローラーの名前に置き換えます。

if ($saveOrder)
{
    $saveOrderingUrl = 'index.php?option=com_example&task=items.saveOrderAjax&tmpl=component';
    JHtml::_('sortablelist.sortable', 'itemList', 'adminForm', strtolower($listDirn), $saveOrderingUrl);
}

$ saveOrderingUrlはあなたがアイテムをドロップAJAX毎回経由で呼び出されます。コントローラーが適切なJoomla MVCクラス（JControllerAdmin）を拡張している場合、このメソッドは自動的に利用可能です。itemListはHTMLテーブルのIDであり、adminFormはHTMLフォームの名前（またはID、不明）です。

<form action="<?php echo JRoute::_('index.php?option=com_example&view=items'); ?>" method="post" name="adminForm" id="adminForm">
    ...
    <table class="table table-striped" id="itemList">
        ...
    </table>
    ...
</form>

HTMLテーブルに新しい列が必要になります。スクリーンショットでは、一番左の列です。テーブルの列ヘッダーは次のようになります。

<th width="1%" class="nowrap center hidden-phone">
    <?php echo JHtml::_('searchtools.sort', '', 'a.ordering', $listDirn, $listOrder, null, 'asc', 'JGRID_HEADING_ORDERING', 'icon-menu-2'); ?>
</th>

テーブル本体には、ほとんどの場合、すべてのリスト項目を通過するforeachループがあります。HTMLテーブルの各行の最初のセルは、ドラッグアイコンになります。ドラッグアンドドロップが無効になっている場合（テーブルは順序どおりに並べられていないため）、アイコンを無効にしてツールチップを作成する必要があります。

<tbody>
    <?php foreach ($this->items as $i => $item) :
        $ordering  = ($listOrder == 'ordering');
    ?>
    <tr class="row<?php echo $i % 2; ?>">
        <td class="order nowrap center hidden-phone">
        <?php
            $iconClass = '';
            if (!$saveOrder) {
                $iconClass = ' inactive tip-top hasTooltip" title="' . JHtml::tooltipText('JORDERINGDISABLED');
            }
         ?>
             <span class="sortable-handler <?php echo $iconClass ?>">
                 <span class="icon-menu"></span>
             </span>
             <?php if ($saveOrder) : ?>
             <input type="text" style="display:none" name="order[]" size="5" value="<?php echo $item->ordering; ?>" class="width-20 text-area-order " />
             <?php endif; ?>
        </td>
  ...
</tbody>