Hi
I’m using the scriptaculous drag and drop library and having a
nightmare with scrolling and getting the draggable to scroll too!
I’ve deliberately not used tables.
I have a container DIV (timeholder) with other DIVS inside
(therapist). Each internal DIV has an id corresponding to a time.
When I scroll the page up … and drag someother over the DIV, it’s
not saving the correct time (e.g. 1400), it’s still giving me the time
of the DIV that should be there before the scrolling! If that makes
sense.
Does anyone know how to get the droppable part of the drag and drop to
scroll when I scroll the page and still register in the right place??
I’ve been reading something about absolute and relative positioning,
but have little idea what they mean?!
The CSS is:
Main holder:
#timeholder {
width: 80px;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: normal;
color: #FFF;
vertical-align: top;
float: left;
position: relative;
margin-left: 15px;
margin-top: 10px;
}
Internal DIV structure/setup …
#therapist {
width: 95%;
height: 25px;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
text-align: center;
position: relative;
margin:0 auto;
vertical-align: middle;
border-top: 1px dashed white;
float: left;
}
.droppable {
height: 25px;
width: 95%;
position: relative;
}
The HTML seems to be set up correctly, but there is something not
quite right with the scrolling and the droppable
HTML:
Thanks once again for any help you can give.
Darren
Hi Derren ,
You can set scroll: window when you creating dragable div (time in
your case)
like
Draggable(id,{
handle:handle,
scroll: window,
revert:true
});
when you set scroll:window it handle your scroll event.
Thanks Naren but it’s not working. I don’t need to scroll the window
when I drag. I scroll before I drag. But the droppables are not
scrolling with the div 
I have a calendar in a div which scrolls. I scroll the calendar before
I drag the appointment into place. When dragging the appointment into
place it still seems to have the droppable values before the scroll!
It’s now beginning to drive me to drink lol.
Any ideas?
If anyone is interested and having the same problem … I think I have
solved this by using the following information (taken from
http://dev.rubyonrails.org/ticket/5174):
I made the additions to dragdrop.js and all seems to be working now!
->>
The following defect was noticed from Script.Aculo.us versions 1.5.3
to 1.6.1.
I have a DIV container which has a set width and height. It is set to
auto-scroll with “overflow: auto” style. It contains a bunch of
Droppable elements (with onHover/onDrop events and some options
parameters). I noticed that if I scroll the container to reveal a
Droppable element at the bottom, when I drag a Draggable element to
it, the code somehow thinks the Droppable element is a certain
distance higher in the container. The vertical distance in error is
the same as the scrolled distance. Therefore, when I drop the element,
it goes to the wrong Droppable area in another location.
I have looked at dragdrop.js, particularly the Droppables.isAffected()
and Droppables.show() methods. They are using prototype’s
Position.within() method to detect if the mouse event position is
within any Droppable element’s boundaries. However, by default,
Position.within() method does not use its “includeScrollOffsets”
boolean member. This boolean member is set to false by default and I
couldn’t find anywhere in the prototype.js that sets it to true.
My work-around for now is to find “Position.prepare();” string within
dragdrop.js, and manually add “Position.includeScrollOffsets = true;”
at the next line. This seems to have fixed the above issue. The three
places I’ve updated are Droppables.fire(), Draggable.updateDrag(), and
Draggable.scroll().
Of course, because of my limited knowledge of prototype and
Script.Aculo.us, there may be much better solution to the issue. I’m
looking forward to seeing this issue getting resolved in your later
releases. Thanks!
Hi Derren,
I am facing the same problem. I tried adding
“Position.includeScrollOffsets = true;” after “Position.prepare();” in
Droppables.fire(), Draggable.updateDrag(), and Draggable.scroll() but
still I am facing the same problem. I have a div container with
overflow:auto style. I am trying to drag elements from a top container
on to bottom div container. When I scroll down the div container and try
dropping the elements, they either get dropped at different location
(these location also include Droppable.add) or don’t get dropped at all.
I also tried looking for http://dev.rubyonrails.org/ticket/5174 but
could not find the page. Any help will be much appreciated. Thanks!
Ruby on Rails: Talk wrote in post #823880:
If anyone is interested and having the same problem … I think I have
solved this by using the following information (taken from
http://dev.rubyonrails.org/ticket/5174):
I made the additions to dragdrop.js and all seems to be working now!
->>
The following defect was noticed from Script.Aculo.us versions 1.5.3
to 1.6.1.
I have a DIV container which has a set width and height. It is set to
auto-scroll with “overflow: auto” style. It contains a bunch of
Droppable elements (with onHover/onDrop events and some options
parameters). I noticed that if I scroll the container to reveal a
Droppable element at the bottom, when I drag a Draggable element to
it, the code somehow thinks the Droppable element is a certain
distance higher in the container. The vertical distance in error is
the same as the scrolled distance. Therefore, when I drop the element,
it goes to the wrong Droppable area in another location.
I have looked at dragdrop.js, particularly the Droppables.isAffected()
and Droppables.show() methods. They are using prototype’s
Position.within() method to detect if the mouse event position is
within any Droppable element’s boundaries. However, by default,
Position.within() method does not use its “includeScrollOffsets”
boolean member. This boolean member is set to false by default and I
couldn’t find anywhere in the prototype.js that sets it to true.
My work-around for now is to find “Position.prepare();” string within
dragdrop.js, and manually add “Position.includeScrollOffsets = true;”
at the next line. This seems to have fixed the above issue. The three
places I’ve updated are Droppables.fire(), Draggable.updateDrag(), and
Draggable.scroll().
Of course, because of my limited knowledge of prototype and
Script.Aculo.us, there may be much better solution to the issue. I’m
looking forward to seeing this issue getting resolved in your later
releases. Thanks!