.htaccessでPHPのファイルアップロードサイズの上限値を変更
2022.02.5
PHPを使用して画像(動画・PDF等)をアップロードするフォームを作成した際に、ファイル…
CMS操作時、登録したオブジェクトを並び替える際に順序を打ち込むのでも良いのですがドラッグ&ドロップで感覚的に操作して入れ替える方法をメモ。
ドラグ&ドロップ機能を実装するにあたり、jQueryとjQuery UI のライブラリを読み込む必要があります。
今回はCDNを利用しています。
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<form action="○○○○.php" method="post">
<table class="listTable">
<thead>
<tr>
<th>NO</th>
<th>カテゴリー名</th>
<th>並び順</th>
</tr>
</thead>
<tbody id="sortdata">
<tr name="1">
<td>1</td>
<td>タロット占い</td>
<td name="num_data"><input type="hidden" name="data[]" value="1"><input type="text" name="item_order[]" value="1"></td>
</tr>
<tr name="1">
<td>2</td>
<td>ヒーリング</td>
<td name="num_data"><input type="hidden" name="data[]" value="2"><input type="text" name="item_order[]" value="2"></td>
</tr>
<tr name="1">
<td>3</td>
<td>西洋占星術</td>
<td name="num_data"><input type="hidden" name="data[]" value="3"><input type="text" name="item_order[]" value="3"></td>
</tr>
</tbody>
</table>
<ul class="submitbtn">
<li><input type="submit" name="changeno" value="表示順を更新する"></li>
</ul>
</form>
<!-- ページ送り機能 -->
<nav>
<ul class="paging">
<li><a href="">最初のページ</a></li>
<li><a href="?pageno=1">1</a></li>
<li><a href="?pageno=2">2</a></li>
<li><a href="?pageno=3">3</a></li>
<li><a href="?pageno=3">最後の(3)ページ</a></li></ul>
</nav>
<!-- ページ送り機能 -->
trタグの「name」の値にはオブジェクトの開始番号を入力。
上記例は最大表示数3までで、1ページ目のため1。
2ページ目の場合は「3*(2-1)+1=4」、3ページ目の場合は「3*(3-1)+1=7」となります。
$('#sortdata').sortable();
var defno = $('#sortdata').find('tr').attr('name');
$('#sortdata').bind('sortstop',function(){
$(this).find('[name="num_data"]').each(function(idx){
$(this).find('input[type="text"]').val(Number(defno)+idx);
});
});
jQuery UI の Sortableメソッドを利用し、ドロップ時に取得したオブジェクトのの開始番号から加算して自動的に番号を割り振り、入力項目に値を挿入。
if(!empty($_POST['changeno'])){
$count = count($_POST['data']);
for($i = 0; $i < $count; $i++){
//データベースへの登録処理
$updatesql = $db->pdo->prepare('UPDATE ○○○○ SET ○○○○ = :item_order WHERE ○○○○ = :id');
$updatesql->bindValue(':item_order', $_POST['item_order'][$i], PDO::PARAM_INT);
$updatesql->bindValue(':id', $_POST['data'][$i], PDO::PARAM_INT);
$updatesql->execute();
}
}
サブミットボタンの押下時にフォームの値を取得してデータベースの値を更新しています。
仕様上、ページを渡ってオブジェクトの入れ替えができないので、その際は数値を直接入力してから再度並びを調整します。
2022.02.5
PHPを使用して画像(動画・PDF等)をアップロードするフォームを作成した際に、ファイル…
2022.02.12
ワードプレスを使用して運用されているサイトで投稿した記事を検索したい(サイト内検索)とい…
2020.12.5
メールフォームからメールを送信する際に、画像(ファイル)を添付できるようにしてほしいとの…
2020.08.1
動画ファイルをCMS化して保存するときに、多くの場合はファイルパスをデータベース(MyS…
2020.10.31
WordPress(ワードプレス)を使ってサイトを作る際に、既に別サイト(同一サーバー内…
管理画面等を使用して店舗を追加していく際に、一つづつ確認しながら地図を埋め込むことも可能…
ホームページ内に動画を掲載する場合、youtube等のサービスを利用する場合は問題ないの…
ホームページ内でスクロールバーを使用する場合、特に設定がなければ左上を基準に表示されます…