PHP JS .sortable 与多个表（主类别和子元素）

Question

这是我想要完成的，但是当我尝试在我的桌子周围制作包装器时（请参阅下面的所有相关代码），它不起作用。这是一个使用 .sortable 的 jsfiddle，它的工作方式完全符合我的期望 (https://jsfiddle.net/phpdeveloperrahul/3dbgov8b/)。

---

目前的状态和我的状况：

我几乎没有连接表（question、survey_question、question category、question_questioncategory）和一个查询来提取所有问题及其各自的类别。提取所有内容后，我将使用表格和 foreach 循环来显示类别和问题。 一旦我开始从上面的 jsfiddle 添加类 'sortable1' 和 'sortable2' + 's1', 's2'，它就不起作用了。

查询：

从问题 q 中选择 q.question_id、q.question_name、qc.questioncategory_parent 左加入调查问题 sq ON sq.question_id = q.question_id AND sq.survey_id=".$survey_id 。"左连接 question_questioncategory qqc ON (qqc.question_id = q.question_id) 左连接 questioncategory qc ON (qc.questioncategory_id = qqc.questioncategory_id) + 我在这里有一些 ORDER BY...

查询输出：

+-------------------------------------------------- ---------------------+ |问题ID |问题名称 | questioncategory_parent | +-------------------------------------------------- ---------------------+ | 100 | CAT A 问题 1 |甲类 | | 101 | CAT A 问题 2 |甲类 | | 102 | CAT B 问题 1 | B类 | | 103 | CAT B 问题 2 | B类 | +-------------------------------------------------- ---------------------+

PHP：我正在使用一个表和两个 foreach 循环来查找类别（questioncategory_parent）和问题（question_id 和 question_name）。

echo "<table class='table table-sm table-hover table-vcenter'>";
    echo "<tbody class='sortable1'>";

        echo "<tr>"; // start unordered list of categories
            $currentCategory = "";
            $first = true;
                                        
            foreach($query_all_questions_row as $row_cat_qstn) {
            if($currentCategory != $row_cat_qstn['questioncategory_parent']) { // if new category
                if($first) {
                    echo "</tr>"; // end previous sub-category list
                } else {
                    $first = false;
                }                                           
                // category name header row                                         
                echo "<th class='bg-primary-dark text-white'>ID</th>";
                echo "<th class='bg-primary-dark text-white'>".$row_cat_qstn['questioncategory_parent']."</th>";
                                            
                echo "<tr>"; // start new sub-category list
                $currentCategory = $row_cat_qstn['questioncategory_parent']; // remember current category   
                }

                // child elements                                       
                echo "<tr>";
                    echo "<td>";
                        echo $row_cat_qstn['question_id'];
                    echo "</td>";
                    echo "<td>";
                        echo $row_cat_qstn['question_name'];
                    echo "</td>";
                echo "</tr>";   
            }   
                                    
            echo "</tr>"; // end last unordered list of sub-categories                                      
        echo "</tr>"; // end unordered list of categories
    echo "</tbody>";
echo "</table>";

这会按预期输出 - 参见图片： PHP output - category A and B, with respective questions listed underneath

JS：根据 jsfiddle，我想让这个工作，但不知道在哪里包括 'sortable1'、'sortable2' 和各自的 'items: s1 和 s2'。

$(".sortable1").sortable({
    items: ".s1"
});

$(".sortable2").sortable({
    items: ".s2"
});

我尝试了许多变体，将“.sortable”添加到不同的部分（在 PHP 中），但没有一个对我有用......例如当前版本适用于“sortable1”，我只能将问题和类别作为独立项目进行排序。但是，我想做的是移动整个类别（以及其中的各个问题）并移动问题，但不可能将它们从类别中移出。 抱歉，如果它看起来很复杂，虽然我觉得这里需要的东西很小，但我可能需要重新考虑并重写我的整个“PHP”部分来完成这个。

Answer 1

以前没有人经历过这种情况或遇到过类似的挑战吗？