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

Question

前提・実現したいこと

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

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

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

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

Comments

[ukyoda]

確認させてほしいのですが、ドラッグしたあとの#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_]

ukyoda様
ご返信いただきまして、誠にありがとうございます。

仰せの通り、例えば「Job1にドラッグした要素の情報を取りたい」のですが、
Elem1、Elem4、Elem7、Elem10の情報をどうやって
取り出せば良いのかがわかりません。

ドラッグ＆ドロップが終わったあとに
子要素として取得すればよろしいのでしょうか？

よろしければご教授くださいませ。
どうぞよろしくお願いいたします。

[ukyoda]

回答、ありがとうございます^^
そうですね。kubota_さんのおっしゃる通り、子要素として取得できれば解決できそうに思います。

ただ、おそらくjqueryのdraggableだけ使うだけだと、要素の「位置」が変わるだけで、DOMツリーの要素移動は行われない（#Job1や#Job2の子要素にはならない）と思います。

調べた感じだと、こちらのサンプルが参考になりそうです。droppableを使って
ドロップ時にDOMを移動させる処理を行なっているみたいですね。
https://jqueryui.com/droppable/#photo-manager

[kubota_]

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