Not sure if others are trying to do a similar thing, but since no one
replied........... ;))
(this post is basically a reminder for myself as well)
I checked out the Scroller class to see what is actually going on.
Can't really explain why it is not working with Scroller, it just
doesn't. It is calculating values in the scroll method that return 0
all the time, plus the attaching of mousemove events don't work with
drag/drop/lightbox stuff...
I have created a new class prototype (similar to Scroller) that now
sort of works. The stuff is moving into the right directions etc. but
I've yet to find a good way to create the accelerator thing Scroller
has (it scroll faster when you're near the edges).
What I do is I use the current position of my element I'm dragging,
combined with:
- the viewport size
- the scrollSize of the container/lightbox/window-thing
- the scroll position of the container/lightbox/window-thing
- area/boundaries setting
... to determine if I should scroll up or down (or do nothing)
Instead of adding a mousemove event to the element that needs to
scroll I just call initiate the periodical call to scroll
onBeforeStart of Drag.Move (this is the "new" attach method).. When I
you stop dragging I clear the timer, using the detach method.
Basically it's the same as Scroller, but without using the events.
I will update the code when I have a better way of calculating the
change values - hehe - but now that this is working I can first
finish
up some other stuff before fine tuning this.
------------------------------------------------------------------------------------------
var ScrollerTEST = new Class({
Implements: [Events, Options],
options: {
area: 20,
fps: 50,
item: null, //item is the element being dragged,
'ghost' in my
case
onChange: function(x, y){
this.element.scrollTo(x, y);
}
},
initialize: function(element, options){
//element is the container (the overflow hidden div
or
document.body)
this.setOptions(options);
this.element = document.id(element);
this.timer = null;
this.viewport = this.element.getSize();
this.containerScrollSize = this.element.getScrollSize();
},
attach: function() {
if(!this.timer) this.timer =
this.scroll.periodical(Math.round
(1000 / this.options.fps), this);
},
detach: function() {
this.timer = $clear(this.timer);
},
scroll: function() {
var currentPosition = this.options.item.getPosition
(this.element);
var scroll = this.element.getScroll();
var change = {x: 0, y: 0};
for (var z in change) {
if(this.containerScrollSize[z] > (scroll[z] + this.viewport
[z]) && currentPosition[z] > scroll[z] + (this.viewport[z] -
this.options.area)) {
/**
* Going down
* this.containerScrollSize[z] > (scroll[z] +
this.viewport[z]) == test if max is reached as far as scrolling goes
* currentPosition[z] > scroll[z] + (this.viewport[z] -
this.options.area) == test if we should move down
*/
var acceleration = (this.options.area * ((currentPosition
[z] - scroll[z])) / 1000); //RRRIGHT
change[z] = (this.options.area + (acceleration *
acceleration)) / 100; //OK.. HMMM
} else if(scroll[z] > 0 && currentPosition[z] <
scroll[z] +
this.options.area) {
/**
* Going up
* scroll[z] > 0 == test if top is not reached already
* currentPosition[z] < scroll[z] + this.options.area ==
test if we should move up
*/
var acceleration = ((this.options.area / currentPosition
[z])*100); //RRRIGHT again
change[z] = -1 * ((this.options.area + (acceleration *
acceleration)) / 100); //OK HMM ... again.. lol, though, it "works"
}
}
if(change.y || change.x) this.fireEvent('change', [scroll.x +
change.x, scroll.y + change.y]);
}
});
------------------------------------------------------------------------------------------
On Aug 16, 1:46 pm, Rolf -nl <[email protected]> wrote:
I still don't fully understand Scroller probably!?
I'm trying to limit posts to this group, but this project is killing
my brains ;) in some areas..
I have a collection of draggable elements which can be dropped on
droppable elements. For the example I have a droppable at the top of
the div.
You get the idea: you're at the bottom of the screen/containing div,
and you need to drag the element all the way to the top to drop it.
Therefore it should scroll up.
If I put everything in the main window and tell Scroller to make
document.body the scrollable element this all works.
Demo:http://www.wouterverhoeven.com/temp/drag-scroll-test.html
I have a problem when the element to scroll is not the document.body
but a container div element, like when you use Squeezebox.
It makes sense to me to make "sbox-content" the scrollable element.
However.. this doesn't work. Anyone?
Test:http://www.wouterverhoeven.com/temp/drag-scroll-test-squeeze.html
The page it loads in the
squeezebox:http://www.wouterverhoeven.com/temp/drag-scroll-test2.html
