Rails spinoffs - Sep 2007 - Getting sortables to behave in scrollable divs

I''m trying to design an interface that includes two DIVs which I can
drag and drop in between, and sort within.

It works fine except when I allow the divs to be scrolled via overflow
CSS settings.

When this happens, and the div  is scrolled, the draggables no longer
know where to go...they seem to be offset the distance of the div
being scrolled (ie, they are relative to the content of the div that
has scrolled off the top rather than height of the div itself).

I assume that this isn''t that abnormal of an interface need, and am
hoping there''s a common fix/workaround to this problem...anyone? ;o)

-Darrel


--~--~---------~--~----~------------~-------~--~----~
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''m still looking for an answer the the below, but perhaps this other
issue is related.

My drag and drop isn''t very smooth. What''s happening is that I
grab a
draggable, it immediately offsets a ghosted image at about 10px, but
then does not follow the cursor drag to where I drop it. I''m a fan of
http://www.gregphoto.net/sortable/advanced/  ''s implementation where
if you drag an item, it not only follows the cursor but the other
draggables also rearrange as you mouse the dragged item over them. Is
that supposed to be the default action, or did greg add custom
scripting to accomplish that particular task?

If this is not related to the other issue, my apologies. Let me know
and I''ll re-post with a better subject line.

-Darrel

On Sep 9, 11:07 am,
"darrel.aus...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org"
<darrel.aus...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
wrote:
> I''m trying to design an interface that includes two DIVs which I
can
> drag and drop in between, and sort within.
>
> It works fine except when I allow the divs to be scrolled via overflow
> CSS settings.
>
> When this happens, and the div  is scrolled, the draggables no longer
> know where to go...they seem to be offset the distance of the div
> being scrolled (ie, they are relative to the content of the div that
> has scrolled off the top rather than height of the div itself).
>
> I assume that this isn''t that abnormal of an interface need, and
am
> hoping there''s a common fix/workaround to this problem...anyone?
;o)
>
> -Darrel

--~--~---------~--~----~------------~-------~--~----~
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
-~----------~----~----~----~------~----~------~--~---

So...in doing a bit more searching on this list, it appears that I''m
not alone in having issues with drag-n-drop between scrollable divs.
Has anyone found a relatively painless solution for this?

Barring that, it appears that drag-n-drop just isn''t going to be a
very practical solution for this. I''ll likely revert to a list of
items as checkboxes with a ''move checked items to other list''
button.

-Darrel


--~--~---------~--~----~------------~-------~--~----~
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 Sep 13, 2007, at 12:42 PM,
darrel.austin-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org wrote:
> So...in doing a bit more searching on this list, it appears that
I''m
> not alone in having issues with drag-n-drop between scrollable divs.
> Has anyone found a relatively painless solution for this?
I''ve done it. It involves working around the CSS issue that''s
at the
root of your trouble. Instead of making the two lists sortable, just  
create two droppables. Observe the mousedown; when it occurs, move  
the selected element higher up the dom tree, outside of the  
overflow:scroll element, and create the Draggable "just in time".  
(This will involve giving it a "kick-start". Check dragdrop.js for  
which functions should be called on mousedown, which has already  
happened.) Destroy the draggable when it''s dropped. There may be  
other issues to work out (like revert--although you can get around  
this by dragging a ghost instead of the original), but it''ll work.
> Barring that, it appears that drag-n-drop just isn''t going to be a
> very practical solution for this. I''ll likely revert to a list of
> items as checkboxes with a ''move checked items to other
list'' button.
Instead of doing checkboxes/submit button, make it "one click." Put a
">>" icon on each item, and make it a one-step process. If I had
to
do the project over (with the solution I used above), I might do it  
this way.  If you only have a single drop location, I suspect a one- 
click solution would be more useable. (This method might also be  
preferred if your list items are sorted.)


TAG

--~--~---------~--~----~------------~-------~--~----~
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 Darrel

I''ve been able to create a three column layout that allows drag and
drop of DIVs using Sortable. The three zones all scroll as needed
using overflow: scroll; overflow-x: hidden. I''m using prototype 1.5.1
and scriptaculous 1.7.1_beta3. So far I''ve had no problems in IE6,
IE7, FireFox.

// onLoad event
Event.observe( window, ''load'', function() {
   Position.includeScrollOffsets = true;
   Sortable.create(''toolZone'', { containment:
[''toolZone''], tag:
''div'', dropOnEmpty: true, scroll:
''scrollingcontent'' } );

    Sortable.create(''dropZone1'', { containment:
[''dropZone1'',
''dropZone2'', ''toolZone''], tag:
''div'', dropOnEmpty: true, scroll:
''scrollingcontent'' } );

Sortable.create(''dropZone2'', { containment:
[''dropZone1'', ''dropZone2'',
''toolZone''], tag: ''div'', dropOnEmpty: true,
scroll:
''scrollingcontent'' } );

 }
);


On Sep 9, 12:07 pm,
"darrel.aus...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org"
<darrel.aus...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
wrote:
> I''m trying to design an interface that includes two DIVs which I
can
> drag and drop in between, and sort within.
>
> It works fine except when I allow the divs to be scrolled via overflow
> CSS settings.
>
> When this happens, and the div  is scrolled, the draggables no longer
> know where to go...they seem to be offset the distance of the div
> being scrolled (ie, they are relative to the content of the div that
> has scrolled off the top rather than height of the div itself).
>
> I assume that this isn''t that abnormal of an interface need, and
am
> hoping there''s a common fix/workaround to this problem...anyone?
;o)
>
> -Darrel

--~--~---------~--~----~------------~-------~--~----~
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
-~----------~----~----~----~------~----~------~--~---