jqueryのdraggableでドラッグした要素名を取得したい

前提・実現したいこと

背景としましては、アルバイトのスタッフさんを特定の仕事にアサインするのに
jquery の draggableを使用してドラッグ＆ドロップで業務ごとのDIVエリアに割当をして、
その結果をPHPで取得したいと思っております。

例えば、".staff_id" というクラスを持った10個ほどのDIV要素を
"#Job1","#Job2","#Job3"といったIDを持つDIV領域内にドラッグ＆ドロップし、
全ての要素のドラッグ作業が完了した時点で"#Job1","#Job2","#Job3"内に
ドロップされた子要素を取得してPHPに送りたいと思っております。

初心者につき、情報が不足しているかもしれませんので、
その際にはご指摘下さい。

どうぞよろしくお願いいたします。

ukyoda

2021/10/11 13:53

確認させてほしいのですが、ドラッグしたあとの#Job1, #Job2, #Job3 の中にある要素の情報が取りたいということであっていますか？＜イメージ＞ドラッグ可能な要素「Elem1〜Elem10」まであったとき、それぞれ下記の通りドラッグした #Job1にドラッグ　- Elem1 　- Elem4 　- Elem7 　- Elem10 #Job2にドラッグ　- Elem2 　- Elem5 　- Elem8 #Job3にドラッグ　- Elem3 　- Elem6 　- Elem9 このとき、例えば「Job1にドラッグした要素の情報が取りたい」のであれば、 Elem1、Elem4、Elem7、Elem10を取り出せればOK。

kubota_

2021/10/12 01:52

ukyoda様ご返信いただきまして、誠にありがとうございます。仰せの通り、例えば「Job1にドラッグした要素の情報を取りたい」のですが、 Elem1、Elem4、Elem7、Elem10の情報をどうやって取り出せば良いのかがわかりません。ドラッグ＆ドロップが終わったあとに子要素として取得すればよろしいのでしょうか？よろしければご教授くださいませ。どうぞよろしくお願いいたします。

ukyoda

2021/10/12 06:53

回答、ありがとうございます^^ そうですね。kubota_さんのおっしゃる通り、子要素として取得できれば解決できそうに思います。ただ、おそらくjqueryのdraggableだけ使うだけだと、要素の「位置」が変わるだけで、DOMツリーの要素移動は行われない（#Job1や#Job2の子要素にはならない）と思います。調べた感じだと、こちらのサンプルが参考になりそうです。droppableを使ってドロップ時にDOMを移動させる処理を行なっているみたいですね。 https://jqueryui.com/droppable/#photo-manager

kubota_

2021/10/13 01:02

度々のご返信をいただきまして、誠にありがとうございます。お知らせいただきましたサイトをチェックしてみます。どうぞよろしくお願いいたします。