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

Reusable element for drag and drop sortable table or list

XMLWordPrintable

    • MOODLE_36_STABLE
    • MOODLE_36_STABLE
    • MDL-51803-master-mouse
    • 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

      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

        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

            marina Marina Glancy
            marina Marina Glancy
            Damyon Wiese Damyon Wiese
            David Monllaó David Monllaó
            Michael Hawkins Michael Hawkins
            Votes:
            5 Vote for this issue
            Watchers:
            16 Start watching this issue

              Created:
              Updated:
              Resolved:

                Error rendering 'clockify-timesheets-time-tracking-reports:timer-sidebar'. Please contact your Jira administrators.