Rails spinoffs - Nov 2006 - Draggable items disappear from div with overflow property

Hi,

I''m using IE 7 and have some items inside a div that has its overflow
property set to auto (the same problem occur on any other value),
whenever i am starting to drag any item outside the div it just
disappear as if the zindex is lower than that of any other item on the
screen.

Does anyone have a solution to this?

Thanks,

Karel.


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

KarelL wrote:
> I''m using IE 7 and have some items inside a div that has its
overflow
> property set to auto (the same problem occur on any other value),
> whenever i am starting to drag any item outside the div it just
> disappear as if the zindex is lower than that of any other item on the
> screen.
> Does anyone have a solution to this?
I''m working on one. Basically there''s a lot of features of
dragdrop.js
that don''t work the way you''d expect (sorry Thomas - love your
work!)
and this is one of them.

Drag and drop moves the item you''re dragging without changing its
parent. So if it''s in an autoscrolling div, the div shows scrollbars as
you drag outside, and the scroll range increases as you drag further
away.

In the case where you''re using ghosting, the clone is left behind in
the place where the draggable came from, and the real element is
still dragged, so you have the same problem with no easy work-
around.

The "handle" option offers to drag an element having a specified class
which is a descendent of the draggable, but as far as I can tell, most
of the actual operations apply to the draggable element, not to the
handle, so it looks like this won''t work properly either, though I
haven''t done much experimenting there.

What I''m trying to do (and am inviting comments here please), is the
following:
1) when ghosting, always drag the ghost not the original draggable
2) allow the ghosting option to indicate an element that should parent
   the handle
3) if using ghosting and handle together, clone the indicated handle
   object
4) always define "this.handle" to be the thing being moved around,
   whether it''s a ghost or the real object.

Number 1 and 2 together allow parenting the handle to the body (you
can''t parent it to the document unfortunately), so it doesn''t
cause the
auto-scroll bug. However, it may have the effect of changing the styles
that affect the handle. I''m not really sure how to handle this; can we
concretize the applied style variables and remove the classes?

Number 3 is a simple bug fix, as far as I can tell.
Number 4 allows it all to work smoothly, just a code cleanup.

A further feature I think should be implemented is the "donut drag"
technique. In this, the ghost is a group of 4 divs, each containing a
clone of the draggable handle, but leaving a small square of a few
pixels under the cursor. Using this method allows the browser to do
*rapid* hit-testing against maybe hundreds or thousands of objects,
because it doesn''t have the handle in the way.

I have a number of problems remaining with the code - there are
places that I''ve changed to use "handle" where it should use
the
draggable for example. I hope there need to be no compatibility-
breaking changes, but it''s possible that a Droppable might do
something to the draggable instead of the handle, or vice versa,
because only one is passed during hit-testing. There might need
to be a breaking change to fix that.

Though I''ve been programming in dozens of languages for 30+ years,
I''ve only been doing JS for a month, so if someone more familiar with
scriptaculous wants to take this task over, I''ll gladly hand it up!
(thinking of you here Thomas...?) :-)

Clifford Heath.


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

The trick for the OPs question to attach the clone at the document level.
See my post on this topic from last Feb... (
http://www.mail-archive.com/rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org/msg01495.html
)

The code is at the bottom, the thing to look at is the initDrag method.

I''m not necessarily suggesting you copy that code verbatim (especially
since
it''s based on an older scriptaculous version), but you should be able
to get
the gist.



On 11/24/06, cjh <clifford.heath-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
wrote:
>
>
> KarelL wrote:
> > I''m using IE 7 and have some items inside a div that has its
overflow
> > property set to auto (the same problem occur on any other value),
> > whenever i am starting to drag any item outside the div it just
> > disappear as if the zindex is lower than that of any other item on the
> > screen.
> > Does anyone have a solution to this?
>
> I''m working on one. Basically there''s a lot of features
of dragdrop.js
> that don''t work the way you''d expect (sorry Thomas - love
your work!)
> and this is one of them.
>
> Drag and drop moves the item you''re dragging without changing its
> parent. So if it''s in an autoscrolling div, the div shows
scrollbars as
> you drag outside, and the scroll range increases as you drag further
> away.
>
> In the case where you''re using ghosting, the clone is left behind
in
> the place where the draggable came from, and the real element is
> still dragged, so you have the same problem with no easy work-
> around.
>
> The "handle" option offers to drag an element having a specified
class
> which is a descendent of the draggable, but as far as I can tell, most
> of the actual operations apply to the draggable element, not to the
> handle, so it looks like this won''t work properly either, though I
> haven''t done much experimenting there.
>
> What I''m trying to do (and am inviting comments here please), is
the
> following:
> 1) when ghosting, always drag the ghost not the original draggable
> 2) allow the ghosting option to indicate an element that should parent
>    the handle
> 3) if using ghosting and handle together, clone the indicated handle
>    object
> 4) always define "this.handle" to be the thing being moved
around,
>    whether it''s a ghost or the real object.
>
> Number 1 and 2 together allow parenting the handle to the body (you
> can''t parent it to the document unfortunately), so it
doesn''t cause the
> auto-scroll bug. However, it may have the effect of changing the styles
> that affect the handle. I''m not really sure how to handle this;
can we
> concretize the applied style variables and remove the classes?
>
> Number 3 is a simple bug fix, as far as I can tell.
> Number 4 allows it all to work smoothly, just a code cleanup.
>
> A further feature I think should be implemented is the "donut
drag"
> technique. In this, the ghost is a group of 4 divs, each containing a
> clone of the draggable handle, but leaving a small square of a few
> pixels under the cursor. Using this method allows the browser to do
> *rapid* hit-testing against maybe hundreds or thousands of objects,
> because it doesn''t have the handle in the way.
>
> I have a number of problems remaining with the code - there are
> places that I''ve changed to use "handle" where it should
use the
> draggable for example. I hope there need to be no compatibility-
> breaking changes, but it''s possible that a Droppable might do
> something to the draggable instead of the handle, or vice versa,
> because only one is passed during hit-testing. There might need
> to be a breaking change to fix that.
>
> Though I''ve been programming in dozens of languages for 30+ years,
> I''ve only been doing JS for a month, so if someone more familiar
with
> scriptaculous wants to take this task over, I''ll gladly hand it
up!
> (thinking of you here Thomas...?) :-)
>
> Clifford Heath.
>
>
> >
>

-- 
Ryan Gahl
Application Development Consultant
Athena Group, Inc.
Inquire: 1-920-955-1457
Blog: http://www.someElement.com


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

Try this style on the element:

#elementid{
  zoom: 1;
}

Does that help?
zoom is a IE-only-css and the only css that can turn on the strange
IE-attribute without changing anything on the element. Read more about
it here:
http://www.satzansatz.de/cssd/onhavinglayout.html


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

Guys thanks for all your help.

Ryan - i''ve borrowed your idea (your script works but has some bugs
with the new version).
What I did as Ryan suggested was creating a draggable element
dynamically, so when the user hover over one of the images, i''m cloning
the image, adding it to the document tree, and putting it on top of
that image (using positions).

The only problem I have is to understand how the onEnd() event works,
I''ve edit it directly on the js file rather than adding a custom one
which works fine but still does anyone have an example of how to add
observers and define events? 

Thanks,

Karel.


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