Uploaded image for project: 'Moodle'
  1. Moodle
  2. MDL-51803

Reusable element for drag and drop sortable table or list

    XMLWordPrintable

    Details

    • Testing Instructions:
      Hide

      take the test file from
      https://raw.githubusercontent.com/marinaglancy/moodle/MDL-51803-master-test/testsort.php
      and copy to your wwwroot

      Play around with the sortable lists, modify test file and try to change some parameters.
      Test on mobile device using touch dragging. Use different browsers. For mobile use some modern browser and an old ones (for example Samsung internet on Galaxy S5).

      Whenever the handle is present (crossarrow icon) try clicking on it and make sure you can use the move dialogue. This dialogue should be accessible with keyboard as well.

      Extra example - resorting table columns
      https://raw.githubusercontent.com/marinaglancy/moodle/MDL-51803-master-test/testsort2.php

      Show
      take the test file from https://raw.githubusercontent.com/marinaglancy/moodle/MDL-51803-master-test/testsort.php and copy to your wwwroot Play around with the sortable lists, modify test file and try to change some parameters. Test on mobile device using touch dragging. Use different browsers. For mobile use some modern browser and an old ones (for example Samsung internet on Galaxy S5). Whenever the handle is present (crossarrow icon) try clicking on it and make sure you can use the move dialogue. This dialogue should be accessible with keyboard as well. Extra example - resorting table columns https://raw.githubusercontent.com/marinaglancy/moodle/MDL-51803-master-test/testsort2.php
    • Affected Branches:
      MOODLE_36_STABLE
    • Fixed Branches:
      MOODLE_36_STABLE
    • Pull from Repository:
    • Pull Master Branch:
      MDL-51803-master-mouse
    • Pull Master Diff URL:

      Description

      This is a proposal to implement a re-usable template and JS module to allow moving table rows or list elements.
      Each UI should be able to use it by specifying an AJAX callback on completion.
      It should be possible to set the first row/element as non-draggable, maybe there are use cases for more than one row/element.

      Use cases:

      • rearranging sections - exists but non standard
      • rearranging activities - this may be a bit trickier because they can be moved to other sections, i.e. outside of the initial ul element
      • changing courses sortorder in the course and category management interface - exists but not standard
      • changing categories sortorder in the course and category management interface - MDL-42297
      • changing courses order in "course overview" block - exists but not standard
      • changing order of enrolment methods - MDL-29302
      • filter plugins list, course format plugins list, question types, repositories, etc.
      • any table in Moodle where we have arrows up and down to sort

        Attachments

        1. autoscroll.js
          5 kB
        2. contentboxes.mustache
          4 kB
        3. customise.js
          7 kB
        4. demo1.mov
          10.19 MB
        5. demo2.mov
          4.28 MB
        6. drag_reorder.js
          16 kB
        7. drag.js
          11 kB
        8. editing.js
          25 kB
        9. screenshot-1.png
          screenshot-1.png
          25 kB
        10. Screen Shot 2018-10-10 at 14.14.34.png
          Screen Shot 2018-10-10 at 14.14.34.png
          79 kB
        11. scrolldragproblem.ogv
          1.37 MB

          Issue Links

          blocks

          Improvement - An enhancement to an existing Moodle feature. MDL-37862 Feedback: Using WYSIWYG editor to format questions

          • Minor - Minor loss of function where workaround is possible
          • Open

          Improvement - An enhancement to an existing Moodle feature. MDL-63648 Drag and drop sorting of tables, fields, keys and indexes in XMLDB editor

          • Minor - Minor loss of function where workaround is possible
          • Closed
          has a non-specific relationship to

          Bug - A problem which impairs or prevents Moodle from functioning correctly. MDL-65546 Name of sections or mods are not displayed correctly after some drag and drop in a course in pop-up dialog

          • Minor - Minor loss of function where workaround is possible
          • Closed
          Testing discovered

          Bug - A problem which impairs or prevents Moodle from functioning correctly. MDL-63625 Remaining issues with drag and drop sortable table or list

          • Major - Major loss of function, incorrect output
          • Closed

          Bug - A problem which impairs or prevents Moodle from functioning correctly. MDL-63736 Commented out define produces "Mismatched anonymous define() module"

          • Minor - Minor loss of function where workaround is possible
          • Closed

            Activity

              People

              Assignee:
              marina Marina Glancy
              Reporter:
              marina Marina Glancy
              Peer reviewer:
              Damyon Wiese Damyon Wiese
              Integrator:
              David Monllaó David Monllaó
              Tester:
              Michael Hawkins Michael Hawkins
              Participants:
              Component watchers:
              Andrew Lyons, Dongsheng Cai, Huong Nguyen, Jun Pataleta, Michael Hawkins, Shamim Rezaie, Simey Lameze, Huong Nguyen, Bas Brands, Mathew May, Huong Nguyen, Barbara Ramiro, Bas Brands, Mathew May
              Votes:
              5 Vote for this issue
              Watchers:
              16 Start watching this issue

                Dates

                Created:
                Updated:
                Resolved:
                Fix Release Date:
                3/Dec/18