Drag and Drop, scrolling and DIVS (scriptaculous)

rubyonrails-talk
1

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

2

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.

3

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 :frowning:

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?

4

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!

5

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: