Rails spinoffs - Mar 2008 - sortable scroll in div problem : dragged element doesn't follow the mouse pointer

Hello,

I''m facing a strange problem with a long list of Sortable items in a
container that has an overflow:auto.

If I drag an item from the top to the bottom, the container div is
scrolling, but there is a difference between the position of the
dragged element and the mouse pointer.

An example is better that a thousand words.
Try to drag the first item at the bottom of the "fourth" list :
http://byrecords.com/dragdrop

I''ve searched for a solution during hours, but I''m clueless.
Any help/clue would be appreciated.

Thanks in advance,
Thomas.
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

I had this problem recently and I''m afraid the only way I found around
it was to prevent the parent div from scrolling and to allow it to
expand with the child elements.  It seems the position calculation
within the Sortable is thrown off by the scrolling div - you can see
this by the way the sortable behaviour is out of sync by a distance
similar to that hidden by the scrolling div.   For instance, your
example works ok when you scroll the div down to the bottom so none is
hidden.

Hope that helps.

On Mar 11, 10:22 am, Thomas
<thomas....-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
wrote:
> Hello,
>
> I''m facing a strange problem with a long list of Sortable items in
a
> container that has an overflow:auto.
>
> If I drag an item from the top to the bottom, the container div is
> scrolling, but there is a difference between the position of the
> dragged element and the mouse pointer.
>
> An example is better that a thousand words.
> Try to drag the first item at the bottom of the "fourth" list
:http://byrecords.com/dragdrop
>
> I''ve searched for a solution during hours, but I''m
clueless.
> Any help/clue would be appreciated.
>
> Thanks in advance,
> Thomas.
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

Hello David,

Thanks for your help.
Indeed, your description of the problem exactly meets my understanding
of it.

Unfortunately, the container really has to be scrollable in my case.

I wonder if it is a bug in scriptaculous or if I did something wrong.
If it is a bug in script.aculo.us I''d be glad to help.
I''m no javascript guru, but if someone has a clue about this problem,
I''d be glad to spend some time on it.

Thanks in advance for your help,
Thomas.

On Mar 11, 6:20 pm, azymuth
<david.winterbot...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
wrote:
> I had this problem recently and I''m afraid the only way I found
around
> it was to prevent the parent div from scrolling and to allow it to
> expand with the child elements.  It seems the position calculation
> within the Sortable is thrown off by the scrolling div - you can see
> this by the way the sortable behaviour is out of sync by a distance
> similar to that hidden by the scrolling div.   For instance, your
> example works ok when you scroll the div down to the bottom so none is
> hidden.
>
> Hope that helps.
>
> On Mar 11, 10:22 am, Thomas
<thomas....-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:
>
> > Hello,
>
> > I''m facing a strange problem with a long list of Sortable
items in a
> > container that has an overflow:auto.
>
> > If I drag an item from the top to the bottom, the container div is
> > scrolling, but there is a difference between the position of the
> > dragged element and the mouse pointer.
>
> > An example is better that a thousand words.
> > Try to drag the first item at the bottom of the "fourth"
list :http://byrecords.com/dragdrop
>
> > I''ve searched for a solution during hours, but I''m
clueless.
> > Any help/clue would be appreciated.
>
> > Thanks in advance,
> > Thomas.
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

Four your information, I''ve posted a new ticket with this problem :
http://dev.rubyonrails.org/ticket/11342

Hope I can collect some more information to correct it.
Thomas.

On Wed, Mar 12, 2008 at 2:45 AM, Thomas
<thomas.tmp-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
wrote:
>
>  Hello David,
>
>  Thanks for your help.
>  Indeed, your description of the problem exactly meets my understanding
>  of it.
>
>  Unfortunately, the container really has to be scrollable in my case.
>
>  I wonder if it is a bug in scriptaculous or if I did something wrong.
>  If it is a bug in script.aculo.us I''d be glad to help.
>  I''m no javascript guru, but if someone has a clue about this
problem,
>  I''d be glad to spend some time on it.
>
>  Thanks in advance for your help,
>  Thomas.
>
>
>
>  On Mar 11, 6:20 pm, azymuth
<david.winterbot...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:
>  > I had this problem recently and I''m afraid the only way I
found around
>  > it was to prevent the parent div from scrolling and to allow it to
>  > expand with the child elements.  It seems the position calculation
>  > within the Sortable is thrown off by the scrolling div - you can see
>  > this by the way the sortable behaviour is out of sync by a distance
>  > similar to that hidden by the scrolling div.   For instance, your
>  > example works ok when you scroll the div down to the bottom so none
is
>  > hidden.
>  >
>  > Hope that helps.
>  >
>  > On Mar 11, 10:22 am, Thomas
<thomas....-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:
>  >
>  > > Hello,
>  >
>  > > I''m facing a strange problem with a long list of
Sortable items in a
>  > > container that has an overflow:auto.
>  >
>  > > If I drag an item from the top to the bottom, the container div
is
>  > > scrolling, but there is a difference between the position of the
>  > > dragged element and the mouse pointer.
>  >
>  > > An example is better that a thousand words.
>  > > Try to drag the first item at the bottom of the
"fourth" list :http://byrecords.com/dragdrop
>  >
>  > > I''ve searched for a solution during hours, but
I''m clueless.
>  > > Any help/clue would be appreciated.
>  >
>  > > Thanks in advance,
>  > > Thomas.
>  >
>
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

Hi!

Any new news regarding this issue?

I have the same problem.

Kind regards,
Pelle

On 12 Mar, 23:55, "Thomas Balthazar"
<thomas....-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
wrote:
> Four your information, I''ve posted a new ticket with this problem
:http://dev.rubyonrails.org/ticket/11342
>
> Hope I can collect some more information to correct it.
> Thomas.
>
> On Wed, Mar 12, 2008 at 2:45 AM, Thomas
<thomas....-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:
>
> >  Hello David,
>
> >  Thanks for your help.
> >  Indeed, your description of the problem exactly meets my
understanding
> >  of it.
>
> >  Unfortunately, the container really has to be scrollable in my case.
>
> >  I wonder if it is a bug in scriptaculous or if I did something wrong.
> >  If it is a bug in script.aculo.us I''d be glad to help.
> >  I''m no javascript guru, but if someone has a clue about this
problem,
> >  I''d be glad to spend some time on it.
>
> >  Thanks in advance for your help,
> >  Thomas.
>
> >  On Mar 11, 6:20 pm, azymuth
<david.winterbot...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:
> >  > I had this problem recently and I''m afraid the only way
I found around
> >  > it was to prevent the parent div from scrolling and to allow it
to
> >  > expand with the child elements.  It seems the position
calculation
> >  > within the Sortable is thrown off by the scrolling div - you can
see
> >  > this by the way the sortable behaviour is out of sync by a
distance
> >  > similar to that hidden by the scrolling div.   For instance,
your
> >  > example works ok when you scroll the div down to the bottom so
none is
> >  > hidden.
>
> >  > Hope that helps.
>
> >  > On Mar 11, 10:22 am, Thomas
<thomas....-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:
>
> >  > > Hello,
>
> >  > > I''m facing a strange problem with a long list of
Sortable items in a
> >  > > container that has an overflow:auto.
>
> >  > > If I drag an item from the top to the bottom, the container
div is
> >  > > scrolling, but there is a difference between the position
of the
> >  > > dragged element and the mouse pointer.
>
> >  > > An example is better that a thousand words.
> >  > > Try to drag the first item at the bottom of the
"fourth" list :http://byrecords.com/dragdrop
>
> >  > > I''ve searched for a solution during hours, but
I''m clueless.
> >  > > Any help/clue would be appreciated.
>
> >  > > Thanks in advance,
> >  > > Thomas.
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

I am also having this same problem.  Here is an example:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <title>script.aculo.us Drag and drop functional test file</title>
  <meta http-equiv="content-type" content="text/html;
charset=utf-8" /
>
  <script src="../../lib/prototype.js"
type="text/javascript"></
script>
  <script src="../../src/scriptaculous.js"
type="text/javascript"></
script>
  <style type="text/css" media="screen">
    #thelist2-mod li, #theList2 li { background: #ffb; margin:2px;
padding: 2px; font-size: 10px;}
  </style>
</head>
<body>
<h1>script.aculo.us Drag and drop functional test file</h1>

<p>Scroll window down to test autoscrolling inside scrollable elements
when window is scrolled</p>

<h3>Box 1</h3>
<div
style="width:400px;height:100px;overflow:auto;position:relative;"
id="scroll-container">
<ul id="thelist2" style="background:red;">
<li>Relatively here!</li>
<li>one</li><li>one</li><li>one</li><li>one</li><li>one</li><li>one</
li><li>one</li><li>one</li>
<li>one</li><li>one</li><li>one</li><li>one</li><li>one</li><li>one</
li><li>one</li><li>one</li>
<li>one</li><li>one</li><li>one</li><li>one</li><li>one</li><li>one</
li><li>one</li><li>one</li>
<li>one</li><li>one</li><li>one</li><li>one</li><li>one</li><li>one</
li><li>one</li><li>one</li>
<li>one</li><li>one</li><li>one</li><li>one</li><li>one</li><li>one</
li><li>one</li><li>one</li>
<li>one</li><li>one</li><li>one</li><li>one</li><li>one</li><li>one</
li><li>one</li><li>one</li>
<li>one</li><li>one</li><li>one</li><li>one</li><li>one</li><li>one</
li><li>one</li><li>one</li>
</ul>
</div>
<h3>Box 2</h2>
<div style="width:400px;height:100px;overflow:auto;"
id="scroll-
container-mod">
<ul id="thelist2-mod" style="background:red;">
<li>two</li><li>two</li><li>two</li><li>two</li><li>two</li><li>two</
li><li>two</li><li>two</li>
<li>two</li><li>two</li><li>two</li><li>two</li><li>two</li><li>two</
li><li>two</li><li>two</li>
<li>two</li><li>two</li><li>two</li><li>two</li><li>two</li><li>two</
li><li>two</li><li>two</li>
<li>two</li><li>two</li><li>two</li><li>two</li><li>two</li><li>two</
li><li>two</li><li>two</li>
<li>two</li><li>two</li><li>two</li><li>two</li><li>two</li><li>two</
li><li>two</li><li>two</li>
<li>two</li><li>two</li><li>two</li><li>two</li><li>two</li><li>two</
li><li>two</li><li>two</li>
<li>two</li><li>two</li><li>two</li><li>two</li><li>two</li><li>two</
li><li>two</li><li>two</li>
<li>two</li><li>two</li><li>two</li><li>two</li><li>two</li><li>two</
li><li>two</li><li>two</li>
</ul>

</div>

<pre id="debug"></pre>

<script type="text/javascript" language="javascript"
charset="utf-8">
// <![CDATA[
//  Sortable.create(''thelist'', {overlap:
''horizontal'', constraint:
false});
Position.includeScrollOffsets = true;

Sortable.create(''thelist2'',{scroll:''scroll-container'',handle:''handle'',
constraint:false,ghosting:false,containment:["thelist2","thelist2-
mod"],scrollSensitivity: 20,scrollSpeed: 25});

Sortable.create(''thelist2-mod'',{scroll:''scroll-container-
mod'',handle:''handle'',
constraint:false,ghosting:false,containment:["thelist2","thelist2-
mod"],scrollSensitivity: 20,scrollSpeed: 25});

// ]]>
</script>
</body>
</html>

Linda Rawson
http://www.sensorytech.net


On Mar 15, 7:01 am, PelleK
<speedysw...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
wrote:
> Hi!
>
> Any new news regarding this issue?
>
> I have the sameproblem.
>
> Kind regards,
> Pelle
>
> On 12 Mar, 23:55, "Thomas Balthazar"
<thomas....-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:
>
>
>
> > Four your information, I''ve posted a new ticket with
thisproblem:http://dev.rubyonrails.org/ticket/11342
>
> > Hope I can collect some more information to correct it.
> > Thomas.
>
> > On Wed, Mar 12, 2008 at 2:45 AM, Thomas
<thomas....-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:
>
> > >  Hello David,
>
> > >  Thanks for your help.
> > >  Indeed, your description of theproblemexactly meets my
understanding
> > >  of it.
>
> > >  Unfortunately, the container really has to be scrollable in my
case.
>
> > >  I wonder if it is a bug in scriptaculous or if I did something
wrong.
> > >  If it is a bug in script.aculo.us I''d be glad to help.
> > >  I''m no javascript guru, but if someone has a clue about
thisproblem,
> > >  I''d be glad to spend some time on it.
>
> > >  Thanks in advance for your help,
> > >  Thomas.
>
> > >  On Mar 11, 6:20 pm, azymuth
<david.winterbot...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:
> > >  > I had thisproblemrecently and I''m afraid the only
way I found around
> > >  > it was to prevent the parentdivfrom scrolling and to allow
it to
> > >  > expand with the child elements.  It seems the position
calculation
> > >  > within theSortableis thrown off by the scrollingdiv- you
can see
> > >  > this by the way thesortablebehaviour is out of sync by a
distance
> > >  > similar to that hidden by the scrollingdiv.   For instance,
your
> > >  > example works ok when youscrollthedivdown to the bottom so
none is
> > >  > hidden.
>
> > >  > Hope that helps.
>
> > >  > On Mar 11, 10:22 am, Thomas
<thomas....-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:
>
> > >  > > Hello,
>
> > >  > > I''m facing a strangeproblemwith a long list
ofSortableitems in a
> > >  > > container that has an overflow:auto.
>
> > >  > > If I drag an item from the top to the bottom, the
containerdivis
> > >  > > scrolling, but there is a difference between the
position of the
> > >  > >draggedelementand themousepointer.
>
> > >  > > An example is better that a thousand words.
> > >  > > Try to drag the first item at the bottom of the
"fourth" list :http://byrecords.com/dragdrop
>
> > >  > > I''ve searched for a solution during hours,
but I''m clueless.
> > >  > > Any help/clue would be appreciated.
>
> > >  > > Thanks in advance,
> > >  > > Thomas.- Hide quoted text -
>
> - Show quoted text -
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

Does anyone have any information on it? I see scattered things of
Position.includeScrollOffsets = true;
But that doesn''t work for me.

it seems to be a re-occuring theme:
(http://dev.rubyonrails.org/ticket/5174)


--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

On Apr 28, 1:16 pm, Steph
<stboisv...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
wrote:
> Does anyone have any information on it? I see scattered things of
> Position.includeScrollOffsets = true;
> But that doesn''t work for me.
>
> it seems to be a re-occuring theme:
> (http://dev.rubyonrails.org/ticket/5174)
Like so many other people, I''ve been grappling with this for a long
time with no results. After reading this post and a few others on
rubyonrails-spinoffs, I''ve finally come up with the following solution
which seems to fix both dragging between two scrollable divs, and the
positioning of the draggable if the parent div is scrolled. It''s not
extensively tested, so comments are welcome.

---
var ScrollableDraggable = Class.create({
  initialize: function(element, ev){
    this._proxy = element.cloneNode(true);
    this._proxy.absolutize();
    this._proxy.style.opacity = 0.7;
    this._proxy.clonePosition(element);

    document.body.appendChild(this._proxy);
    new Draggable(this._proxy, {
      onEnd: function(){
        document.body.removeChild(this._proxy);
      }.bind(this)
    }).initDrag(ev);
  }
});

$$(''.scrollablbleDraggable'').each(function(sD)
{sD.observe(''onmousedown'', function(ev){new
ScrollableDraggable(Event.element(ev), ev)})});
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---