質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
jQuery UI

jQuery UI はjQuery公式のインターフェースライブラリであり、対話型のウェブアプリケーションを作る際に役立ちます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

ドラッグ&ドロップ

コンピューターのGUIにおいて、バーチャルなものを「つかむ」ことによって選択し、別の場所や他のバーチャルなものの上に動かす行為、またはその行為に対応していることを指す。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

661閲覧

要素をjqueryでドラッグアンドドロップをすると同時にphpでsubmitさせたい

singlestroke

総合スコア68

jQuery UI

jQuery UI はjQuery公式のインターフェースライブラリであり、対話型のウェブアプリケーションを作る際に役立ちます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

ドラッグ&ドロップ

コンピューターのGUIにおいて、バーチャルなものを「つかむ」ことによって選択し、別の場所や他のバーチャルなものの上に動かす行為、またはその行為に対応していることを指す。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

1クリップ

投稿2023/02/19 13:52

実現したいこと

  • HTMLのリスト要素をドラッグアンドドロップが完了すると同時にphpでSQLでUPDATE を実行したい

前提

  • ひとまずjqueryでのやり方を模索中
  • Ajaxの非同期処理で実現可能?

発生している問題

ボタンを押下した際にphpにsubmitすることはできている。

該当のソースコード

HTML

1<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script> 2<script src="http://code.jquery.com/ui/1.11.3/jquery-ui.js"></script> 3<form action="" method="post"> 4 <ul class="sortable"> 5 <li>リスト1</li> 6 <li>リスト2</li> 7 <li>リスト3</li> 8 <li>リスト4</li> 9 <li>リスト5</li> 10 </ul> 11 <input type="hidden" id="result" name="result" /> 12 <button id="submit">submit</button> 13</form>

Javascript

1$(function() { 2 $(".sortable").sortable(); 3 $(".sortable").disableSelection(); 4 $("#submit").click(function() { 5 var result = $(".sortable").sortable("toArray"); 6 $("#result").val(result); 7 $("form").submit(); 8 }); 9});

補足情報(FW/ツールのバージョンなど)

jquery でなくても構いません。本当はjQueryを使いたくありません。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yambejp

2023/02/20 00:49

resultに何も返してないですが、なにをどうpostしようとしていますか?
guest

回答1

0

ベストアンサー

html

1 <form id="form" action="/path/to/file.php" method="post"> 2 <ul id="list"> 3 <li data-id="1">リスト1</li> 4 <li data-id="2">リスト2</li> 5 <li data-id="3">リスト3</li> 6 <li data-id="4">リスト4</li> 7 <li data-id="5">リスト5</li> 8 </ul> 9 <input type="hidden" id="result" name="result" /> 10 </form>

js

1(function() { 2 'use strict'; 3 4 $(function() { 5 const form = document.getElementById('form'); 6 const result = document.getElementById('result'); 7 const $list = $('#list'); 8 9 $list.sortable({ 10 opacity: 0.5, 11 axis: 'y', 12 update: function() { 13 const listOrder = $(this).sortable('toArray', {attribute: 'data-id'}).join(','); 14 result.value = listOrder; 15 asyncSubmit(form); 16 }, 17 }); 18 $list.disableSelection(); 19 }) 20 21 function asyncSubmit(form) { 22 const options = { 23 method: form.method, 24 body: new FormData(form), 25 }; 26 fetch(form.action, options); 27 } 28}());

投稿2023/02/19 16:55

arcxor

総合スコア2859

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

singlestroke

2023/02/20 13:13

ありがとうございます。しばし検証のお時間をいただけますでしょうか。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問