General developer forum

Does anyone understand Moodle's drag and drop JavaScript?

 
Tim at Lone Pine Koala Sanctuary
Does anyone understand Moodle's drag and drop JavaScript?
Core developersDocumentation writersParticularly helpful MoodlersPlugin developers

Moodle has a drag-drop library (lib/yui/src/dragdrop/js/dragdrop.js) which is used in a few places:

  1. Editing activities and sections when you have editing on in a Moodle course.
  2. Edit the questions and pages in a quiz.
  3. Most recently tool_lp.

Item 2 there might suggest that once upon a time I might have understood this. However, that code was mostly blindly copied from the course editing, and a lot of that work was done by a colleague of mine. I clearly don't understand it at all, because I am trying to use it again now, and I can't get it to work at all, and I can't find any documentation. Help!

If you don't know, one of the nice things that core drag-drop adds, on top of YUI drag-drop, which it is a wrapper around, is good accessibility support. If you have not done it before, try clicking on the Move icon on the course page, instead of dragging it.

My example shoud be very similar to course editing. My HTML looks like this. Boxes should be draggable so they can be re-ordered. and within each box, the items should be re-orderable:

<ul class="dashboardboxes-boxes">
<li data-id="2">
<h3>
<a href="#" class="dashboardboxes-movebox">
<img class="smallicon" src=".../core/-1/i/dragdrop"/>
</a><span>Box A</span>
</h3>
<ul>
<li data-id="18">
<a href="#" class="dashboardboxes-moveitem"
src=".../core/-1/i/dragdrop"/>
</a>
<span>Item 1</span>
</li>
</ul>
</li>
<li data-id="3">
<h3>
<a href="#" class="dashboardboxes-movebox">
<img class="smallicon" src=".../core/-1/i/dragdrop"/>
</a><span>Box B</span>
</h3>
<ul>
<li data-id="19">
<a href="#" class="dashboardboxes-moveitem"
src=".../core/1498571911/i/dragdrop"/>
</a>
<span>Item 2</span>
</li>
<li data-id="20">
<a href="#" class="dashboardboxes-moveitem"
src=".../core/1498571911/i/dragdrop"/>
</a>
<span>Item 3</span>
</li>
</ul>
</li>
</ul>

I think I have set things up with the right JS (which is being called - verified using console.log), but nothing happens, not even an error message in the JS console, which makes it really hard to debug.

Any help would be greatly appreciated. Thanks.

 
Average of ratings: -
Gareth J Barnard
Re: Does anyone understand Moodle's drag and drop JavaScript?
Core developersParticularly helpful MoodlersPlugin developers

Hi Tim,

I know that course formats declare a 'process_sections' function that gets called when D&D has finished.  I've searched and looks like it is called in '/course/yui/src/dragdrop/js/section.js'.  Therefore this indicates to me that the file '/lib/yui/src/dragdrop/js/dragdrop.js' is not the whole story but rather a utility to be used within another wrapper.  So I think you need some other JS to make use of that file to achieve what you want.

Kind regards,

Gareth

 
Average of ratings: -
Tim at Lone Pine Koala Sanctuary
Re: Does anyone understand Moodle's drag and drop JavaScript?
Core developersDocumentation writersParticularly helpful MoodlersPlugin developers

'... when D&D has finished ...'

Oh, how I wish that was my problem. I can't even get drag-and-drop to start.

Well, by building an absolutely minimal example (static HTML, simple JavaScript based on what is in tool_lp) I made something work. But, as soon as I tried to apply that to my real HTML structure, it stopped working again with no explanation.

I am going to code it myself, based on some OU-specific drag code that Sam Marshal wrote. (Which is not based on YUI.)

Note, the core drag drop has some bad points:

  • It is based on YUI, so is bound to be replaced at some point, so not a great thing to build on.
  • It makes some really annoying assumptions, like it insists on generating the drag icons in JS. You can't use icons already output by your template.
  • It insists on identifying the things to drag by a CSS class name. You can't use other sorts of selectors.
  • Plus the fact I can't make it work.
 
Average of ratings: -
Picture of Mike Churchward
Re: Does anyone understand Moodle's drag and drop JavaScript?
Core developersParticularly helpful MoodlersPlugin developersPlugins guardiansTesters

"Plus the fact I can't make it work."

Being the most relevant point... wink

 
Average of ratings: -
Gareth J Barnard
Re: Does anyone understand Moodle's drag and drop JavaScript?
 
Average of ratings: -
Tim at Lone Pine Koala Sanctuary
Re: Does anyone understand Moodle's drag and drop JavaScript?
Core developersDocumentation writersParticularly helpful MoodlersPlugin developers

When Moodle HQ was contemplating waht to move to when YUI went out of support, they looked at jQuery UI, but they found that the accessibility was not as good as the level of accessibility that Moodle aspires to.

It is not acutally that hard to implement drag drop. Damyon pointed me to this bit of recent code: https://github.com/moodle/moodle/blob/master/admin/tool/lp/amd/src/competencyactions.js#L539 showing that if you can use the new HTML5 drag-drop stuff (https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API). However, at the moment, it does not seem well enough supported for student-facing stuff (http://caniuse.com/#feat=dragndrop).

So, I am coding my own, based on some drag code that Sam wrote. When I am finished (if I get time between finishing this development task, and going on holiday) I will try to write up a summary of what I did. It is pleasingly little code, and I did write quite a good doc comment about how to use it.

 
Average of ratings: -
Tim at Lone Pine Koala Sanctuary
Re: Does anyone understand Moodle's drag and drop JavaScript?
Core developersDocumentation writersParticularly helpful MoodlersPlugin developers

Just to say that, in the end, I went ahead and made my own simple drag-drop library. And, prompted by a discusion in dev chat, I just shared it on MDL-51803. That may be useful to some people. I was quite pleased with how it worked out.

 
Average of ratings: -