This project is archived and is in readonly mode.

#532 ✓duplicate
jmt_be

Drag.Move element drifts away when Scroller scrolls

Reported by jmt_be | March 1st, 2011 @ 07:44 PM

http://jsfiddle.net/jmt_be/JpvzX/

Simply try to drag the "abs" square to T2 or T3 down the scroll. The square will drift away when
scrolling happens.

I did not want to modify immediately the Drag class because my issue was in fact relating to Drag.Move.
However, I have not been able to achieve easily what I wanted without opening a little door in the Drag
class so its subclasses could tune its behavior without requiring to duplicate too much code. The details of the changes are in the attached file (change in Drag class and updated Drag.Move class).

Now to have this working smoothly while scroll is occuring and mouse is not necessarily moving, I implemented a special version of Scroller that basically knows when something that needs updating is dragged and generates a fake mouse move event so that the element coordinates are going to be adjusted.

The code in my special Scroller (besides the init of this.draggedtarget_owned) is in the scroll method:

                if (change.y || change.x) {
            
            this.fireEvent('change', [scroll.x + change.x, scroll.y + change.y]);
            
            /* jmt
              generate a fake mousemove event to force the update of the dragged element in the context of the scrolled element
            */
            if (this.draggedtarget_owned){          
                //console.log("EDGE SCROLLING: need to adjust target");
                // generate a mousemove so the drag object can be updated
                var evObj = document.createEvent('MouseEvents');
                //evObj.initMouseEvent( 'mousemove', bubbles, cancelable, windowObject, detail, screenX, screenY, clientX, clientY, ctrlKey, altKey, shiftKey, metaKey, button, relatedTarget )
                evObj.initMouseEvent( 'mousemove', false, true, window, 0, this.page.x, this.page.y, this.page.x, this.page.y, false, false, false, false, 0, null ),
                document.dispatchEvent(evObj);  //assumption is that drag is listening for mousemove on document !!!!
            };

Comments and changes to this ticket

Create your profile

Help contribute to this project by taking a few moments to create your personal profile. Create your profile »

The MooTools Extensions

People watching this ticket

Attachments

Pages