Merge pull request #5207 from christianbeeznest/displayorder-tools

Exercise: Refine sortable interaction, ajax updates, and design enhancements in questions list

assets/css/scss/_exercise.scss

@@ -62,6 +62,16 @@
   box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(102, 175, 233, 0.6);
 }
 
+.ui-state-highlight {
+  height: 3.5em;
+  line-height: 2.2em;
+  background-color: #fafafa;
+  border: 1px dashed #ccc;
+  margin-top: 10px;
+  margin-bottom: 10px;
+  padding: 5px;
+}
+
 .question_menu {
   @apply p-4 flex flex-row gap-1;
 }
@@ -232,4 +242,4 @@
       @apply text-left;
     }
   }
-}
+}

public/main/exercise/question_list_admin.inc.php

@@ -57,6 +57,7 @@ $ajax_url = api_get_path(WEB_AJAX_PATH).'exercise.ajax.php?'.api_get_cidreq().'&
             }
         });
 
+        var isDragging = false;
         $("#question_list").accordion({
             icons: null,
             heightStyle: "content",
@@ -64,6 +65,10 @@ $ajax_url = api_get_path(WEB_AJAX_PATH).'exercise.ajax.php?'.api_get_cidreq().'&
             collapsible: true,
             header: ".header_operations",
             beforeActivate: function (e, ui) {
+                if (isDragging) {
+                    e.preventDefault();
+                    isDragging = false;
+                }
                 var data = ui.newHeader.data();
                 if (typeof data === 'undefined') {
                     return;
@@ -95,19 +100,29 @@ $ajax_url = api_get_path(WEB_AJAX_PATH).'exercise.ajax.php?'.api_get_cidreq().'&
         })
         .sortable({
             cursor: "move", // works?
+            axis: "y",
+            placeholder: "ui-state-highlight", //defines the yellow highlight
+            handle: ".moved", //only the class "moved"
+            start: function(event, ui) {
+                isDragging = true;
+            },
+            stop: function(event, ui) {
+                stop = true;
+                setTimeout(function() {
+                    isDragging = false;
+                }, 50);
+            },
             update: function (event, ui) {
                 var order = $(this).sortable("serialize") + "&a=update_question_order&exercise_id=<?php echo $exerciseId; ?>";
                 $.post("<?php echo $ajax_url; ?>", order, function (result) {
                     $("#message").html(result);
                 });
-            },
-            axis: "y",
-            placeholder: "ui-state-highlight", //defines the yellow highlight
-            handle: ".moved", //only the class "moved"
-            stop: function () {
-                stop = true;
             }
         });
+
+        $(".moved").on('click', function(event) {
+            event.stopImmediatePropagation();
+        });
     });
 </script>
 <?php
@@ -246,7 +261,7 @@ if (!$inATest) {
                 $title = strip_tags($title);
                 $move = '&nbsp;';
                 if ($allowQuestionOrdering) {
-                    $move = Display::getMdiIcon('cursor-move');
+                    $move = Display::getMdiIcon('cursor-move', 'moved');
                 }
 
                 // Question name

public/main/inc/ajax/exercise.ajax.php

@@ -347,9 +347,8 @@ switch ($action) {
                     $TBL_QUESTIONS,
                     ['question_order' => $counter],
                     [
-                        'question_id = ? AND c_id = ? AND quiz_id = ? ' => [
+                        'question_id = ? AND quiz_id = ? ' => [
                             (int) $new_order_id,
-                            $course_id,
                             $exercise_id,
                         ],
                     ]