From: Michael M Slusarz Date: Thu, 7 Jan 2010 18:33:49 +0000 (-0700) Subject: DragDrop2 fixes X-Git-Url: https://git.internetallee.de/?a=commitdiff_plain;h=11209f3c17bb4622c38bb5d3636dc651b8cb3af9;p=horde.git DragDrop2 fixes Having access to the browser event that triggered the Drop custom event is useful (i.e. determining if CTRL/SHIFT/ALT key is pressed). Add abilitiy to access this event object in custom event handlers. DragDrop2:drop was passing the drop element as the memo attribute. This should instead be the Drag object to be consistent with the over/out events. Improve documentation. --- diff --git a/horde/js/dragdrop2.js b/horde/js/dragdrop2.js index 233a5c4a8..2c6a1d83e 100644 --- a/horde/js/dragdrop2.js +++ b/horde/js/dragdrop2.js @@ -14,69 +14,72 @@ * MIT-style license. * * Usage: - * new Drag(element, { - * caption: '', // Either string or function to set caption - * // on mouse move - * classname: '', // Class name of the drag element + * ------ + * new Drag(element, { + * caption: '', // Either string or function to set caption + * // on mouse move. + * classname: '', // Class name of the drag element. * // DEFAULT: 'drag' - * constraint: '', // Constrain movement to 'horizontal' - * // or 'vertical' - * ghosting: false, // Show ghost outline when dragging. - * nodrop: false, // Don't do drop checking. Optimizes + * constraint: '', // Constrain movement to 'horizontal' or + * // 'vertical'. + * ghosting: false, // Show ghost outline when dragging. + * nodrop: false, // Don't do drop checking. Optimizes * // movement speed. - * offset: { x:0, y:0 }, // An offset to apply to ghosted elements. - * parentElement: function(), // Function returns the parent element. - * scroll: element, // Scroll this element when above/below. - * // Only working for vertical elements - * snap: null, // If ghosting, snap allows to specify + * offset: { x:0, y:0 }, // An offset to apply to ghosted elements. + * parentElement: function(), // Function returns the parent element. + * scroll: element, // Scroll this element when above/below ( + * // only for vertical elements). + * snap: null, // If ghosting, snap allows to specify * // coords at which the ghosted image will * // "snap" into place. - * snapToParent: false // Keep image snapped inside the parent + * snapToParent: false // Keep image snapped inside the parent * // element. - * threshold: 0 // Move threshold - * }); + * threshold: 0 // Move threshold. + * }); * - * Events fired for Drags: - * ----------------------- - * Custom events are triggered on the drag element. The 'memo' property of - * the Event object contains the original event object. + * Events fired for Drags: + * ----------------------- + * Custom events are triggered on the drag element. The 'memo' property of + * the Event object contains the original event object. * - * 'DragDrop2:drag' - * Fired on mousemove. + * 'DragDrop2:drag' + * Fired on mousemove. * - * 'DragDrop2:end' - * Fired on mousedown. + * 'DragDrop2:end' + * Fired on mousedown. * - * 'DragDrop2:start' - * Fired on mouseup. + * 'DragDrop2:start' + * Fired on mouseup. * * - * new Drop(element, { - * accept: [], // Accept filter by tag name(s) or leave empty to - * // accept all tags - * caption: '', // Either string or function to set caption on - * // mouseover - * hoverclass: '', // Change the drag element to this class when - * // hovering over an element. - * // DEFAULT: 'dragdrop' - * keypress: false // If true, will re-render caption if a keypress - * // is detected while a drop is active (useful for - * // CTRL/SHIFT actions). - * }); + * new Drop(element, { + * accept: [], // Accept filter by tag name(s) or leave empty to + * // accept all tags. + * caption: '', // Either string or function to set caption on + * // mouseover. + * hoverclass: '', // Change the drag element to this class when hovering + * // over an element. + * // DEFAULT: 'dragdrop' + * keypress: false // If true, will re-render caption if a keypress is + * // detected while a drop is active (useful for + * // CTRL/SHIFT actions). + * }); * - * Events fired for Drops: - * ----------------------- - * Custom events are triggered on the drop element. The 'memo' property of - * the Event object contains the drag element. + * Events fired for Drops: + * ----------------------- + * Custom events are triggered on the drop element. The 'memo' property of + * the Event object contains the Drag object. The dragged element is available + * in 'memo.element'. The browser event that triggered the custom event is + * available in 'memo.dragevent'. * - * 'DragDrop2:drop' - * Fired when mouse button released (a/k/a a drop event). + * 'DragDrop2:drop' + * Fired when mouse button released (a/k/a a drop event). * - * 'DragDrop2:out' - * Fired when mouse leaves the drop zone. + * 'DragDrop2:out' + * Fired when mouse leaves the drop zone. * - * 'DragDrop2:over' - * Fired when mouse over drop zone. + * 'DragDrop2:over' + * Fired when mouse over drop zone. * * * Permission is hereby granted, free of charge, to any person obtaining a @@ -218,6 +221,7 @@ Drag = Class.create({ initialize: function(el) { + this.dragevent = null; this.element = $(el); this.ghostOffset = [ 0, 0 ]; this.options = Object.extend({ @@ -423,7 +427,8 @@ Drag = Class.create({ DragDrop.Drags.div.hide(); if (DragDrop.validDrop(this.element)) { - d.element.fire('DragDrop2:drop', this.element); + this.dragevent = e; + d.element.fire('DragDrop2:drop', this); } DragDrop.Drags.deactivate(); @@ -472,11 +477,11 @@ Drag = Class.create({ if (elt == d) { d_update = false; } else { - elt.mouseOver(); + elt.mouseOver(e); d = elt; } } else if (d) { - d.mouseOut(); + d.mouseOut(e); d = null; } } @@ -714,15 +719,17 @@ Drop = Class.create({ DragDrop.Drops.unregister(this); }, - mouseOver: function() + mouseOver: function(e) { DragDrop.Drops.drop = this; + DragDrop.Drags.drag.dragevent = e; this.element.fire('DragDrop2:over', DragDrop.Drags.drag); }, - mouseOut: function() + mouseOut: function(e) { this.element.fire('DragDrop2:out', DragDrop.Drags.drag); + DragDrop.Drags.drag.dragevent = e; DragDrop.Drops.drop = null; } diff --git a/imp/js/DimpBase.js b/imp/js/DimpBase.js index 536999d6d..5b341868e 100644 --- a/imp/js/DimpBase.js +++ b/imp/js/DimpBase.js @@ -1560,7 +1560,7 @@ var DimpBase = { folderDropHandler: function(e) { var dropbase, sel, uids, - drag = e.memo, + drag = e.memo.element, drop = e.element(), foldername = drop.retrieve('mbox'), ftype = drop.retrieve('ftype'); @@ -1583,7 +1583,7 @@ var DimpBase = { } if (uids.size()) { - if (e.ctrlKey) { + if (e.dragevent.ctrlKey) { DimpCore.doAction('CopyMessage', this.viewport.addRequestParams({ tofld: foldername }), { uids: uids }); } else if (this.folder != foldername) { // Don't allow drag/drop to the current folder.