Ruby on Rails: Talk
2009-Jun-05 21:46 UTC
Drag and Drop, scrolling and DIVS (scriptaculous)
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:
<div class="droppable" id="2009-06-05/15:00:00/3">
<script type="text/javascript">
//<![CDATA[
Droppables.add("2009-06-05/15:00:00/3", {onDrop:function(element){new
Ajax.Request(''/appointment/add_appointment/2009-06-05%2F15:00:00%2F3'',
{asynchronous:true, evalScripts:true, parameters:''id='' +
encodeURIComponent(element.id) + ''&authenticity_token='' +
encodeURIComponent(''bc5e1a5c5cf0a736c37a80a843131e64d316527e'')})}})
//]]>
</script>
</div>
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.
Ruby on Rails: Talk
2009-Jun-06 10:05 UTC
Re: Drag and Drop, scrolling and DIVS (scriptaculous)
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? On 6 June, 05:59, Naren <naren.sisod...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:> 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.
Ruby on Rails: Talk
2009-Jun-06 10:17 UTC
Re: Drag and Drop, scrolling and DIVS (scriptaculous)
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! On 6 June, 11:05, "Ruby on Rails: Talk" <dazzaroo...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:> 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? > > On 6 June, 05:59, Naren <naren.sisod...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote: > > > 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.
Hi Darren, 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!-- Posted via http://www.ruby-forum.com/. -- You received this message because you are subscribed to the Google Groups "Ruby on Rails: Talk" group. To post to this group, send email to rubyonrails-talk-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org To unsubscribe from this group, send email to rubyonrails-talk+unsubscribe-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org For more options, visit https://groups.google.com/groups/opt_out.