2 * The core drag and drop module for Moodle which extends the YUI drag and
3 * drop functionality with additional features.
5 * @module moodle-core-dragdrop
9 largepix: "i/dragdrop",
11 cssclass: 'moodle-core-dragdrop-draghandle'
15 * General DRAGDROP class, this should not be used directly,
16 * it is supposed to be extended by your class
18 * @class M.core.dragdrop
22 var DRAGDROP = function() {
23 DRAGDROP.superclass.constructor.apply(this, arguments);
26 Y.extend(DRAGDROP, Y.Base, {
28 * Whether the item is being moved upwards compared with the last
38 * Whether the item is being moved upwards compared with the start
41 * @property absgoingup
48 * The class for the object.
50 * @property samenodeclass
57 * The class on the parent of the item being moved.
59 * @property parentnodeclass
63 parentnodeclass: null,
66 * The groups for this instance.
75 * The previous drop location.
77 * @property lastdroptarget
84 * The initializer which sets up the move action.
89 initializer: function() {
90 // Listen for all drag:start events.
91 Y.DD.DDM.on('drag:start', this.global_drag_start, this);
93 // Listen for all drag:end events.
94 Y.DD.DDM.on('drag:end', this.global_drag_end, this);
96 // Listen for all drag:drag events.
97 Y.DD.DDM.on('drag:drag', this.global_drag_drag, this);
99 // Listen for all drop:over events.
100 Y.DD.DDM.on('drop:over', this.global_drop_over, this);
102 // Listen for all drop:hit events.
103 Y.DD.DDM.on('drop:hit', this.global_drop_hit, this);
105 // Listen for all drop:miss events.
106 Y.DD.DDM.on('drag:dropmiss', this.global_drag_dropmiss, this);
108 // Add keybaord listeners for accessible drag/drop
109 Y.one(Y.config.doc.body).delegate('key', this.global_keydown,
110 'down:32, enter, esc', '.' + MOVEICON.cssclass, this);
112 // Make the accessible drag/drop respond to a single click.
113 Y.one(Y.config.doc.body).delegate('click', this.global_keydown,
114 '.' + MOVEICON.cssclass , this);
118 * Build a new drag handle Node.
120 * @method get_drag_handle
121 * @param {String} title The title on the drag handle
122 * @param {String} classname The name of the class to add to the node
123 * wrapping the drag icon
124 * @param {String} [iconclass] The class to add to the icon
125 * @param {Boolean} [large=false] whether to use the larger version of
127 * @return Node The built drag handle.
129 get_drag_handle: function(title, classname, iconclass, large) {
130 var iconname = MOVEICON.pix;
132 iconname = MOVEICON.largepix;
134 var dragicon = Y.Node.create('<img />')
135 .setStyle('cursor', 'move')
137 'src': M.util.image_url(iconname, MOVEICON.component),
141 dragicon.addClass(iconclass);
144 var dragelement = Y.Node.create('<span></span>')
146 .setAttribute('title', title)
147 .setAttribute('tabIndex', 0)
148 .setAttribute('data-draggroups', this.groups)
149 .setAttribute('role', 'button')
150 .setAttribute('aria-grabbed', 'false');
151 dragelement.appendChild(dragicon);
152 dragelement.addClass(MOVEICON.cssclass);
157 lock_drag_handle: function(drag, classname) {
158 drag.removeHandle('.'+classname);
161 unlock_drag_handle: function(drag, classname) {
162 drag.addHandle('.'+classname);
165 ajax_failure: function(response) {
167 name: response.status+' '+response.statusText,
168 message: response.responseText
170 return new M.core.exception(e);
173 in_group: function(target) {
175 Y.each(this.groups, function(v) {
176 if (target._groups[v]) {
183 * Drag-dropping related functions
185 global_drag_start: function(e) {
186 // Get our drag object
188 // Check that drag object belongs to correct group
189 if (!this.in_group(drag)) {
192 // Set some general styles here
193 drag.get('node').setStyle('opacity', '.25');
194 drag.get('dragNode').setStyles({
196 borderColor: drag.get('node').getStyle('borderColor'),
197 backgroundColor: drag.get('node').getStyle('backgroundColor')
199 drag.get('dragNode').empty();
203 global_drag_end: function(e) {
205 // Check that drag object belongs to correct group
206 if (!this.in_group(drag)) {
209 //Put our general styles back
210 drag.get('node').setStyles({
217 global_drag_drag: function(e) {
221 // Check that drag object belongs to correct group
222 if (!this.in_group(drag)) {
226 // Note, we test both < and > situations here. We don't want to
227 // effect a change in direction if the user is only moving side
228 // to side with no Y position change.
230 // Detect changes in the position relative to the start point.
231 if (info.start[1] < info.xy[1]) {
232 // We are going up if our final position is higher than our start position.
233 this.absgoingup = true;
235 } else if (info.start[1] > info.xy[1]) {
236 // Otherwise we're going down.
237 this.absgoingup = false;
240 // Detect changes in the position relative to the last movement.
241 if (info.delta[1] < 0) {
242 // We are going up if our final position is higher than our start position.
245 } else if (info.delta[1] > 0) {
246 // Otherwise we're going down.
247 this.goingup = false;
253 global_drop_over: function(e) {
254 // Check that drop object belong to correct group.
255 if (!e.drop || !e.drop.inGroup(this.groups)) {
259 // Get a reference to our drag and drop nodes.
260 var drag = e.drag.get('node'),
261 drop = e.drop.get('node');
263 // Save last drop target for the case of missed target processing.
264 this.lastdroptarget = e.drop;
266 // Are we dropping within the same parent node?
267 if (drop.hasClass(this.samenodeclass)) {
276 // Add the node contents so that it's moved, otherwise only the drag handle is moved.
277 drop.insert(drag, where);
278 } else if ((drop.hasClass(this.parentnodeclass) || drop.test('[data-droptarget="1"]')) && !drop.contains(drag)) {
279 // We are dropping on parent node and it is empty
289 global_drag_dropmiss: function(e) {
290 // drag:dropmiss does not have e.drag and e.drop properties
291 // we substitute them for the ease of use. For e.drop we use,
292 // this.lastdroptarget (ghost node we use for indicating where to drop)
294 e.drop = this.lastdroptarget;
295 // Check that drag object belongs to correct group
296 if (!this.in_group(e.drag)) {
299 // Check that drop object belong to correct group
300 if (!e.drop || !e.drop.inGroup(this.groups)) {
303 this.drag_dropmiss(e);
306 global_drop_hit: function(e) {
307 // Check that drop object belong to correct group
308 if (!e.drop || !e.drop.inGroup(this.groups)) {
315 * This is used to build the text for the heading of the keyboard
316 * drag drop menu and the text for the nodes in the list.
317 * @method find_element_text
318 * @param {Node} n The node to start searching for a valid text node.
319 * @return {string} The text of the first text-like child node of n.
321 find_element_text: function(n) {
322 // The valid node types to get text from.
323 var nodes = n.all('h2, h3, h4, h5, span, p, div.no-overflow, div.dimmed_text');
326 nodes.each(function () {
328 if (Y.Lang.trim(this.get('text')) !== '') {
329 text = this.get('text');
337 return M.util.get_string('emptydragdropregion', 'moodle');
341 * This is used to initiate a keyboard version of a drag and drop.
342 * A dialog will open listing all the valid drop targets that can be selected
343 * using tab, tab, tab, enter.
344 * @method global_start_keyboard_drag
345 * @param {Event} e The keydown / click event on the grab handle.
346 * @param {Node} dragcontainer The resolved draggable node (an ancestor of the drag handle).
347 * @param {Node} draghandle The node that triggered this action.
349 global_start_keyboard_drag: function(e, draghandle, dragcontainer) {
350 M.core.dragdrop.keydragcontainer = dragcontainer;
351 M.core.dragdrop.keydraghandle = draghandle;
353 // Indicate to a screenreader the node that is selected for drag and drop.
354 dragcontainer.setAttribute('aria-grabbed', 'true');
355 // Get the name of the thing to move.
356 var nodetitle = this.find_element_text(dragcontainer);
357 var dialogtitle = M.util.get_string('movecontent', 'moodle', nodetitle);
359 // Build the list of drop targets.
360 var droplist = Y.Node.create('<ul></ul>');
361 droplist.addClass('dragdrop-keyboard-drag');
365 // Search for possible drop targets.
366 var droptargets = Y.all('.' + this.samenodeclass + ', .' + this.parentnodeclass);
368 droptargets.each(function (node) {
369 var validdrop = false, labelroot = node;
370 if (node.drop && node.drop.inGroup(this.groups) && node.drop.get('node') !== dragcontainer) {
371 // This is a drag and drop target with the same class as the grabbed node.
374 var elementgroups = node.getAttribute('data-draggroups').split(' ');
376 for (i = 0; i < elementgroups.length; i++) {
377 for (j = 0; j < this.groups.length; j++) {
378 if (elementgroups[i] === this.groups[j]) {
379 // This is a parent node of the grabbed node (used for dropping in empty sections).
381 // This node will have no text - so we get the first valid text from the parent.
382 labelroot = node.get('parentNode');
393 // It is a valid drop target - create a list item for it.
394 listitem = Y.Node.create('<li></li>');
395 listlink = Y.Node.create('<a></a>');
396 nodetitle = this.find_element_text(labelroot);
398 listitemtext = M.util.get_string('tocontent', 'moodle', nodetitle);
399 listlink.setContent(listitemtext);
401 // Add a data attribute so we can get the real drop target.
402 listlink.setAttribute('data-drop-target', node.get('id'));
403 // Notify the screen reader this is a valid drop target.
404 listlink.setAttribute('aria-dropeffect', 'move');
405 // Allow tabbing to the link.
406 listlink.setAttribute('tabindex', '0');
408 // Set the event listeners for enter, space or click.
409 listlink.on('click', this.global_keyboard_drop, this);
410 listlink.on('key', this.global_keyboard_drop, 'down:enter,32', this);
412 // Add to the list or drop targets.
413 listitem.append(listlink);
414 droplist.append(listitem);
418 // Create the dialog for the interaction.
419 M.core.dragdrop.dropui = new M.core.dialogue({
420 headerContent: dialogtitle,
421 bodyContent: droplist,
427 // Focus the first drop target.
428 if (droplist.one('a')) {
429 droplist.one('a').focus();
434 * This is used as a simulated drag/drop event in order to prevent any
435 * subtle bugs from creating a real instance of a drag drop event. This means
436 * there are no state changes in the Y.DD.DDM and any undefined functions
437 * will trigger an obvious and fatal error.
438 * The end result is that we call all our drag/drop handlers but do not bubble the
439 * event to anyone else.
441 * The functions/properties implemented in the wrapper are:
448 * e.drag.removeHandle()
450 * @method simulated_drag_drop_event
451 * @param {Node} dragnode The drag container node
452 * @param {Node} dropnode The node to initiate the drop on
454 simulated_drag_drop_event: function(dragnode, dropnode) {
456 // Subclass for wrapping both drag and drop.
457 var DragDropWrapper = function(node) {
461 // Method e.drag.get() - get the node.
462 DragDropWrapper.prototype.get = function(param) {
463 if (param === 'node' || param === 'dragNode' || param === 'dropNode') {
469 // Method e.drag.inGroup() - we have already run the group checks before triggering the event.
470 DragDropWrapper.prototype.inGroup = function() {
474 // Method e.drag.addHandle() - we don't want to run this.
475 DragDropWrapper.prototype.addHandle = function() {};
476 // Method e.drag.removeHandle() - we don't want to run this.
477 DragDropWrapper.prototype.removeHandle = function() {};
479 // Create instances of the DragDropWrapper.
480 this.drop = new DragDropWrapper(dropnode);
481 this.drag = new DragDropWrapper(dragnode);
482 this.target = this.drop;
486 * This is used to complete a keyboard version of a drag and drop.
487 * A drop event will be simulated based on the drag and drop nodes.
488 * @method global_keyboard_drop
489 * @param {Event} e The keydown / click event on the proxy drop node.
491 global_keyboard_drop: function(e) {
492 // The drag node was saved.
493 var dragcontainer = M.core.dragdrop.keydragcontainer;
494 dragcontainer.setAttribute('aria-grabbed', 'false');
495 // The real drop node is stored in an attribute of the proxy.
496 var droptarget = Y.one('#' + e.target.getAttribute('data-drop-target'));
499 M.core.dragdrop.dropui.hide();
502 // Convert to drag drop events.
503 var dragevent = new this.simulated_drag_drop_event(dragcontainer, dragcontainer);
504 var dropevent = new this.simulated_drag_drop_event(dragcontainer, droptarget);
505 // Simulate the full sequence.
506 this.drag_start(dragevent);
507 this.global_drop_over(dropevent);
508 this.global_drop_hit(dropevent);
509 M.core.dragdrop.keydraghandle.focus();
513 * This is used to cancel a keyboard version of a drag and drop.
515 * @method global_cancel_keyboard_drag
517 global_cancel_keyboard_drag: function() {
518 if (M.core.dragdrop.keydragcontainer) {
519 M.core.dragdrop.keydragcontainer.setAttribute('aria-grabbed', 'false');
520 M.core.dragdrop.keydraghandle.focus();
521 M.core.dragdrop.keydragcontainer = null;
526 * Process key events on the drag handles.
528 * @method global_keydown
529 * @param {EventFacade} e The keydown / click event on the drag handle.
531 global_keydown: function(e) {
532 var draghandle = e.target.ancestor('.' + MOVEICON.cssclass, true),
536 if (draghandle === null) {
537 // The element clicked did not have a a draghandle in it's lineage.
541 if (e.keyCode === 27 ) {
542 // Escape to cancel from anywhere.
543 this.global_cancel_keyboard_drag();
548 // Only process events on a drag handle.
549 if (!draghandle.hasClass(MOVEICON.cssclass)) {
553 // Do nothing if not space or enter.
554 if (e.keyCode !== 13 && e.keyCode !== 32 && e.type !== 'click') {
558 // Check the drag groups to see if we are the handler for this node.
559 draggroups = draghandle.getAttribute('data-draggroups').split(' ');
560 var i, j, validgroup = false;
562 for (i = 0; i < draggroups.length; i++) {
563 for (j = 0; j < this.groups.length; j++) {
564 if (draggroups[i] === this.groups[j]) {
577 // Valid event - start the keyboard drag.
578 dragcontainer = draghandle.ancestor('.yui3-dd-drop');
579 this.global_start_keyboard_drag(e, draghandle, dragcontainer);
585 // Abstract functions definitions.
588 * Callback to use when dragging starts.
591 * @param {EventFacade} e
593 drag_start: function() {},
596 * Callback to use when dragging ends.
599 * @param {EventFacade} e
601 drag_end: function() {},
604 * Callback to use during dragging.
607 * @param {EventFacade} e
609 drag_drag: function() {},
612 * Callback to use when dragging ends and is not over a drop target.
614 * @method drag_dropmiss
615 * @param {EventFacade} e
617 drag_dropmiss: function() {},
620 * Callback to use when a drop over event occurs.
623 * @param {EventFacade} e
625 drop_over: function() {},
628 * Callback to use on drop:hit.
631 * @param {EventFacade} e
633 drop_hit: function() {}
639 M.core = M.core || {};
640 M.core.dragdrop = DRAGDROP;