update

styles.css

@@ -349,50 +349,59 @@ td.selected {
 }
 
 .qn-sorting-list {
+    float: left;
     list-style-type: none;
-    padding-left: 0;
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
+    margin: 0 0 0 8px;
 }
 
-.qn-sorting-list.horizontal {
-    display: flex;
-    align-items: flex-start;
-    flex-wrap: wrap;
-    flex-direction: row;
+ol.qn-sorting-list {
+    padding-left: 0;
+    margin-inline-start: 0;
 }
 
-.qn-sorting-list.horizontal.response {
-    justify-content: flex-end;
+.qn-sorting-list.active {
+    border: 1px dotted #333;
+    border-radius: 4px;
 }
 
-.qn-sorting-list > li {
-    margin: 5px 5px 5px 0;
+.qn-sorting-list li {
     background-color: #fff;
     border: 1px solid #000;
-    cursor: move;
-    text-align: left;
+    list-style-type: none;
+    border-radius: 0;
+    margin: 10px 10px 10px 0;
+    padding: 5px 8px;
 }
 
-.qn-sorting-list__content {
-    padding: 6px 12px;
+.qn-sorting-list li.qn-sorting-list__items {
+    position: relative;
     cursor: move;
 }
 
-.qn-sorting-list div span {
-    cursor: move;
+.qn-sorting-list li.qn-sorting-list__items:focus {
+    border-color: #0a0;
+    box-shadow: 0 0 5px 5px rgba(255, 255, 150, 1);
 }
 
-.qn-sorting-list li:focus-visible {
-    outline: none;
-    border: 1px solid #0a0;
-    box-shadow: 0 0 2px 2px rgba(255, 255, 150, 1);
+.qn-sorting-list.numberingnone li {
+    list-style-type: none;
+    margin-left: 0;
 }
 
-.qn-sorting-list li.over {
-    background-color: #eaeaea;
-    box-shadow: 0 0 5px 1px #eaeaea;
+.qn-sorting-list.horizontal {
+    display: flex;
+    flex-wrap: wrap;
+}
+
+/* Better define 'row' of item for horizontal list. */
+.qn-sorting-list.horizontal {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-start;
+}
+
+.qn-sorting-list.vertical li {
+    min-height: 18px;
 }
 
 /* Styles for when things are being dragged. */
@@ -406,14 +415,21 @@ td.selected {
     padding: 0;
     float: none;
 }
-.qn-sorting-list.dragproxy .qn-sorting-list li {
+.qn-sorting-list-dragproxy .qn-sorting-list li.qn-sorting-list__items {
     margin: 0;
     padding: 6px 0 6px 12px;
     width: 100%;
+    word-wrap: break-word;
 }
-.qn-sorting-list.dragproxy .qn-sorting-list li.horizontal {
+.qn-sorting-list-dragproxy .qn-sorting-list li.horizontal {
     float: none;
 }
+.item-moving {
+    box-shadow: 3px 3px 4px #000;
+}
+.current-drop {
+    visibility: hidden;
+}
 
 #notice .qn-question {
     margin: 0;

tests/behat/behat_mod_questionnaire.php

@@ -465,4 +465,48 @@ protected function get_cm_by_questionnaire_name(string $name): stdClass {
         $questionnaire = $this->get_questionnaire_by_name($name);
         return get_coursemodule_from_instance('questionnaire', $questionnaire->id, $questionnaire->course);
     }
+
+    /**
+     * Get the xpath for a given item by label.
+     *
+     * @param string $label the text of the item to drag.
+     * @return string the xpath expression.
+     */
+    protected function item_xpath_by_label(string $label): string {
+        return '//li[contains(@class, "qn-sorting-list__items") and contains(., "'
+            . $this->escape($label) . '")]';
+    }
+
+    /**
+     * Get the xpath for a given drop box.
+     *
+     * @param string $position the number of place to drop it.
+     * @return string the xpath expression.
+     */
+    protected function item_xpath_by_position(string $position): string {
+        return '//li[contains(@class, "qn-sorting-list__items")][' . $position . ']';
+    }
+
+    /**
+     * Drag the drag item with the given text to the given space.
+     *
+     * Also, do not use this to drag an item to the last place. Just drag all
+     * the other non-last items to their place.
+     *
+     * @param string $label the text of the item to drag.
+     * @param int $position the number of the position to drop it at.
+     *
+     * @Given /^I drag "(?P<label>[^"]*)" to space "(?P<position>\d+)" in the sorting question$/
+     * @throws coding_exception
+     */
+    public function i_drag_to_space_in_the_drag_and_drop_into_text_question_sorting(string $label, int $position): void {
+        $generalcontext = behat_context_helper::get('behat_general');
+        // There was a weird issue where drag-drop was not reliable if an item was being
+        // dragged to the same place it already was. So, first drag below the bottom to reliably
+        // move it to the last place.
+        $generalcontext->i_drag_and_i_drop_it_in($this->item_xpath_by_label($label),
+            'xpath_element', get_string('submitsurvey', 'questionnaire'), 'button');
+        $generalcontext->i_drag_and_i_drop_it_in($this->item_xpath_by_label($label),
+            'xpath_element', $this->item_xpath_by_position($position), 'xpath_element');
+    }
 }

tests/behat/sorting_question.feature

@@ -52,11 +52,7 @@ Feature: Add sorting questions to a questionnaire activity
     And I follow "Test questionnaire"
     And I navigate to "Answer the questions..." in current page administration
     Then I should see "Sorting-001 text"
-    And I click on "//*[contains(@class, 'qn-sorting-list')]/li[1]" "xpath_element"
-    And I press the down key
-    And I click on "//*[contains(@class, 'qn-sorting-list')]/li[2][contains(., 'Sorting item 1')]" "xpath_element"
-    And I click on "//*[contains(@class, 'qn-sorting-list')]/li[3]" "xpath_element"
-    And I press the up key
+    And I drag "Sorting item 1" to space "3" in the sorting question
     And I press "Submit questionnaire"
     And I should see "Thank you for completing this Questionnaire."
     And I press "Continue"