Forum: Ruby on Rails Drag and Drop, scrolling and DIVS (scriptaculous)

Announcement (2017-05-07): www.ruby-forum.com is now read-only since I unfortunately do not have the time to support and maintain the forum any more. Please see rubyonrails.org/community and ruby-lang.org/en/community for other Rails- und Ruby-related community platforms.
Dc372593c8ad1d324033652008f706ee?d=identicon&s=25 Ruby on Rails: Talk (Guest)
on 2009-06-05 23:47
(Received via mailing list)
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
3c8c35f1a799c3905fc0cab4e030803d?d=identicon&s=25 Naren (Guest)
on 2009-06-06 10:30
(Received via mailing list)
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.
Dc372593c8ad1d324033652008f706ee?d=identicon&s=25 Ruby on Rails: Talk (Guest)
on 2009-06-06 12:06
(Received via mailing list)
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?
Dc372593c8ad1d324033652008f706ee?d=identicon&s=25 Ruby on Rails: Talk (Guest)
on 2009-06-06 12:18
(Received via mailing list)
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!
8e7d32a9e8d21015673872cc46769946?d=identicon&s=25 Ashish K. (ashish_k)
on 2012-10-19 22:44
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!
This topic is locked and can not be replied to.