Skip to content

501 Drag and drop broken on single section page (?section=N) #63

Description

@guillogo

When you use the Two Column format and turn editing on, drag and drop works fine on the main course page. But if you click on a section and go to the single section view (?section=N), you cannot drag and drop activities at all. The drag handles show up but nothing moves.

How to reproduce

  1. Create a course with the Two Column format.
  2. Add at least 2 sections with some activities.
  3. Turn editing on.
  4. On the main course page, drag and drop works.
  5. Click any section to go to ?section=N. Drag and drop is broken.

Root cause

Since Moodle 4.0, the course editor uses a reactive JavaScript system (core_courseformat/local/content) to handle drag and drop. This system needs two things to work on any page:

  1. The section element in the HTML must have data-for="section" and data-id attributes so the JS can find and register it.
    component.init() must be called once per page to start the reactive editor.
  2. The twocol format renders single section pages using its own custom template (format_twocol/course_topic) instead of the core one. Because of this, neither the required HTML attributes nor the JS init call are present on single section pages. The reactive editor never starts, so drag and drop never works.

Note
A similar fix was already merged for the Moodle 4.04/4.05 branch (commit e6ea52e). That fix added the HTML attributes but not the JS init call. For Moodle 5.1, the JS init is also required because the YUI fallback for drag and drop was removed.

Environment
Moodle 5.1.5 (Build: 20260608) format_twocol branch MOODLE_501_STABLE

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions