This has been driving me nuts the past two days and I'm giving up.
Test:
http://www.wouterverhoeven.com/temp/scrollmadness.php
You see a container div (does nothing) and a bunch of divs (just a
couple doing nothing) and one draggable at the bottom. Goal is to drop
it on the droppable on top, make sure your window is small enough so
you don't see the top when you are at the bottom.
I removed all the code except for a simple drag.move and scroller
action.
What I need is some scroller class that helps me when dragging
elements around the page and I need to go further than the view port
(is that how you say it?) the window (or containing element, e.g. a
modal/squeezebox) should scroll up or down or left/right whatever.
In the test I attached the scroller to the document.body.
I start it onBeforeDrag and I stop it onComplete (or I could stop it
onDrop).
1. Start dragging the draggable element.
2. Scroll up to the top of your window, going up to the drop area..
3. The scroller doesn't really work straight away (Firefox) you gotta
move it up/down/up/down around the top for it to start scrolling.. OK,
not so nice, but I can live with that (and perhaps fix later).
4. Drop it at the top. scroller.stop() is called. scroller.stop should
remove the mousemove events..
5. Move your mouse up and down.. and the window still scrolls.
Why something so easy (you'd say, using standard stuff) seems to be so
hard?
TIA!! I need a break now. :/
PS, the JS code used:
window.addEvent('domready', function() {
var scroller = new Scroller(document.body, {
area: 70,
velocity: 0.4
});
var myDrag = new Drag.Move('dragme', {
droppables: '.droppable',
onBeforeStart: function() { scroller.start(); },
onComplete: function() { scroller.stop(); },
onDrop: function(element, droppable, event){
if (!droppable) console.log(element, ' dropped on
nothing');
else console.log(element, 'dropped on', droppable,
'event', event);
}
});
});
