sanzbox@yahoo.com
2005-Sep-29 05:50 UTC
[Rails-spinoffs] Draggables and overflow div''s revisited
I have two scrollable div''s (overflow:auto), one with
a list of elements (the source) and the other is the
drop target (dest).
I''ve enabled ghosting so that the drag element gets
out of the scrollable box (good).
Interesting, at least on Firefox, the ghosted drag
ends up going ''under'' the destination div when I drag
it. No amount of z-order fidding seems to make it go
above. (bad)
Questions:
*) Is there a way to make the ghostable drag div float
above the target div?
*) Is there a way to easily disable the revert
animation effect but keep the behavior? (I''d like the
element to move via the ghost, but not change position
on mouse release).
All help appreciated.
<div id=''destination''
class=''item_list_scroll''>
<%= render(:partial => ''shared/items'', :object =>
@items) %>
</div>
<div class=''item_list_scroll''>
<div id=''drag1''>[*] Draggable Element</div>
<%= draggable_element "drag1", :ghosting => true,
:revert => true %>
</div>
.item_list_scroll {
|
height: 200px;
|
width: 300px;
|
overflow: auto;
|
background-color: #ccc;
|
border: solid 1px #666;
|
padding: 8px;
|}
______________________________________________________
Yahoo! for Good
Donate to the Hurricane Katrina relief effort.
http://store.yahoo.com/redcross-donate3/
I''ve had alot of the same problems. I''ve noticed if you scroll and drag an element outside of the div it jumps downward to where it would appear on the page had you not scrolled. I know this has to be an easy fix, I just don''t know enough javascript to do it. Hopefully someone does because this makes sortables useless for any of the fun stuff. For the record it does the same thing using just a draggable so I believe the problem is with draggables themselves. sanzbox@yahoo.com wrote:>I have two scrollable div''s (overflow:auto), one with >a list of elements (the source) and the other is the >drop target (dest). > >I''ve enabled ghosting so that the drag element gets >out of the scrollable box (good). > >Interesting, at least on Firefox, the ghosted drag >ends up going ''under'' the destination div when I drag >it. No amount of z-order fidding seems to make it go >above. (bad) > >Questions: > >*) Is there a way to make the ghostable drag div float >above the target div? > >*) Is there a way to easily disable the revert >animation effect but keep the behavior? (I''d like the >element to move via the ghost, but not change position >on mouse release). > >All help appreciated. > > > > > > > ><div id=''destination'' class=''item_list_scroll''> ><%= render(:partial => ''shared/items'', :object => >@items) %> ></div> ><div class=''item_list_scroll''> ><div id=''drag1''>[*] Draggable Element</div> ><%= draggable_element "drag1", :ghosting => true, >:revert => true %> ></div> > >.item_list_scroll { > | >height: 200px; > | >width: 300px; > | >overflow: auto; > | >background-color: #ccc; > | >border: solid 1px #666; > | >padding: 8px; > |} > > > > > > >______________________________________________________ >Yahoo! for Good >Donate to the Hurricane Katrina relief effort. >http://store.yahoo.com/redcross-donate3/ > >_______________________________________________ >Rails-spinoffs mailing list >Rails-spinoffs@lists.rubyonrails.org >http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs > > > > >
Thomas Fuchs
2005-Sep-30 03:48 UTC
[Rails-spinoffs] Draggables and overflow div''s revisited
It would be great to have a functional test file for this, to include in script.aculo.us. Can you come up with something? Just look at the other test files in test/functional. Thomas Am 29.09.2005 um 11:18 schrieb sanzbox@yahoo.com:> I have two scrollable div''s (overflow:auto), one with > a list of elements (the source) and the other is the > drop target (dest). > > I''ve enabled ghosting so that the drag element gets > out of the scrollable box (good). > > Interesting, at least on Firefox, the ghosted drag > ends up going ''under'' the destination div when I drag > it. No amount of z-order fidding seems to make it go > above. (bad) > > Questions: > > *) Is there a way to make the ghostable drag div float > above the target div? > > *) Is there a way to easily disable the revert > animation effect but keep the behavior? (I''d like the > element to move via the ghost, but not change position > on mouse release). > > All help appreciated. > > > > > > > > <div id=''destination'' class=''item_list_scroll''> > <%= render(:partial => ''shared/items'', :object => > @items) %> > </div> > <div class=''item_list_scroll''> > <div id=''drag1''>[*] Draggable Element</div> > <%= draggable_element "drag1", :ghosting => true, > :revert => true %> > </div> > > .item_list_scroll { > | > height: 200px; > | > width: 300px; > | > overflow: auto; > | > background-color: #ccc; > | > border: solid 1px #666; > | > padding: 8px; > |} > > > > > > > ______________________________________________________ > Yahoo! for Good > Donate to the Hurricane Katrina relief effort. > http://store.yahoo.com/redcross-donate3/ > > _______________________________________________ > Rails-spinoffs mailing list > Rails-spinoffs@lists.rubyonrails.org > http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs >
Thomas Fuchs
2005-Sep-30 03:48 UTC
[Rails-spinoffs] Draggables and overflow div''s revisited
It would be great to have a functional test file for this, to include in script.aculo.us. Can you come up with something? Just look at the other test files in test/functional. Thomas Am 30.09.2005 um 05:31 schrieb Joe Black:> I''ve had alot of the same problems. > > I''ve noticed if you scroll and drag an element outside of the div it > jumps downward to where it would appear on the page had you not > scrolled. I know this has to be an easy fix, I just don''t know enough > javascript to do it. Hopefully someone does because this makes > sortables useless for any of the fun stuff. > > For the record it does the same thing using just a draggable so I > believe the problem is with draggables themselves. > > sanzbox@yahoo.com wrote: > > >> I have two scrollable div''s (overflow:auto), one with >> a list of elements (the source) and the other is the >> drop target (dest). >> >> I''ve enabled ghosting so that the drag element gets >> out of the scrollable box (good). >> >> Interesting, at least on Firefox, the ghosted drag >> ends up going ''under'' the destination div when I drag >> it. No amount of z-order fidding seems to make it go >> above. (bad) >> >> Questions: >> >> *) Is there a way to make the ghostable drag div float >> above the target div? >> >> *) Is there a way to easily disable the revert >> animation effect but keep the behavior? (I''d like the >> element to move via the ghost, but not change position >> on mouse release). >> >> All help appreciated. >> >> >> >> >> >> >> >> <div id=''destination'' class=''item_list_scroll''> >> <%= render(:partial => ''shared/items'', :object => >> @items) %> >> </div> >> <div class=''item_list_scroll''> >> <div id=''drag1''>[*] Draggable Element</div> >> <%= draggable_element "drag1", :ghosting => true, >> :revert => true %> >> </div> >> >> .item_list_scroll { >> | >> height: 200px; >> | >> width: 300px; >> | >> overflow: auto; >> | >> background-color: #ccc; >> | >> border: solid 1px #666; >> | >> padding: 8px; >> |} >> >> >> >> >> >> >> ______________________________________________________ >> Yahoo! for Good >> Donate to the Hurricane Katrina relief effort. >> http://store.yahoo.com/redcross-donate3/ >> >> _______________________________________________ >> Rails-spinoffs mailing list >> Rails-spinoffs@lists.rubyonrails.org >> http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs >> >> >> >> >> >> > > > _______________________________________________ > Rails-spinoffs mailing list > Rails-spinoffs@lists.rubyonrails.org > http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs >
Ok, I think I understand what''s going on in the D-n-D code: Current Drag-n-Drop state of affairs: *) Drags the original source element (not a clone - even in ghosting mode) *) Ends up getting stuck inside containing elements *) Doesn''t use drop-target success/failure to decide if release animation should run *) Release animation gets confused when inside overflow elements *) Not particularly useful for any complex d-n-d UI work Desired state: *) Drags a clone of the element *) Clone placed in the top level document object so it can float above all elements *) Drop target can return ''success'' or ''failure'' and that determines if release animation is run (or other arbitrary event code). *) Release animation doesn''t get confused in scrollable containers (should be unaffected). I went over and took at look at what the Dojo guys are doing, they have a similar approach to the desired state, along with some other goodness (clearing text selections, etc). Perhaps we could take a closer look at their design, seems much cleaner than what we''re doing. -San --- Thomas Fuchs <thomas@fesch.at> wrote:> It would be great to have a functional test file for > this, to include > in script.aculo.us. > > Can you come up with something? Just look at the > other test files in > test/functional. > > Thomas > > Am 29.09.2005 um 11:18 schrieb sanzbox@yahoo.com: > > > I have two scrollable div''s (overflow:auto), one > with > > a list of elements (the source) and the other is > the > > drop target (dest). > > > > I''ve enabled ghosting so that the drag element > gets > > out of the scrollable box (good). > > > > Interesting, at least on Firefox, the ghosted drag > > ends up going ''under'' the destination div when I > drag > > it. No amount of z-order fidding seems to make it > go > > above. (bad) > > > > Questions: > > > > *) Is there a way to make the ghostable drag div > float > > above the target div? > > > > *) Is there a way to easily disable the revert > > animation effect but keep the behavior? (I''d like > the > > element to move via the ghost, but not change > position > > on mouse release). > > > > All help appreciated. > > > > > > > > > > > > > > > > <div id=''destination'' class=''item_list_scroll''> > > <%= render(:partial => ''shared/items'', :object => > > @items) %> > > </div> > > <div class=''item_list_scroll''> > > <div id=''drag1''>[*] Draggable Element</div> > > <%= draggable_element "drag1", :ghosting => true, > > :revert => true %> > > </div> > > > > .item_list_scroll { > > | > > height: 200px; > > | > > width: 300px; > > | > > overflow: auto; > > | > > background-color: #ccc; > > | > > border: solid 1px #666; > > | > > padding: 8px; > > |} > > > > > > > > > > > > > > >______________________________________________________> > Yahoo! for Good > > Donate to the Hurricane Katrina relief effort. > > http://store.yahoo.com/redcross-donate3/ > > > > _______________________________________________ > > Rails-spinoffs mailing list > > Rails-spinoffs@lists.rubyonrails.org > > >http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs> > > > _______________________________________________ > Rails-spinoffs mailing list > Rails-spinoffs@lists.rubyonrails.org >http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs>__________________________________ Yahoo! Mail - PC Magazine Editors'' Choice 2005 http://mail.yahoo.com
Thomas Fuchs
2005-Oct-01 04:55 UTC
[Rails-spinoffs] Draggables and overflow div''s revisited
The problem I see with this is both HTML (e.g. LI elements should be in an UL or OL) and CSS classes. I can''t see a nice way around this... :| Thomas Am 30.09.2005 um 13:37 schrieb San Trois:> Desired state: > > *) Clone placed in the top level document object so it > can float above all elements
I used nested div''s with good results other than the overflow bug. Thomas Fuchs wrote:> The problem I see with this is both HTML (e.g. LI elements should be > in an UL or OL) > and CSS classes. I can''t see a nice way around this... :| > > Thomas > > Am 30.09.2005 um 13:37 schrieb San Trois: > >> Desired state: >> >> *) Clone placed in the top level document object so it >> can float above all elements > > > _______________________________________________ > Rails-spinoffs mailing list > Rails-spinoffs@lists.rubyonrails.org > http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs > > >
Why not just push the issue back on the user? So, if a user wants to Drag nested css selectors or LI''s or any non DIV elements then it''s their job to make sure they''ve instatiated the correct drop targets (e.g. only make the UL list targetable, etc). We can even warn them if they''re being stupid (dragging out LI''s to a non UL/OL target, etc). For everyone else that want''s to use DIV''s to move content around, let''s empower them. In the grand scheme of Drag-n-Drop, list reording is pretty low on the list of required features. (How often do you recorder stuff in a normal UI today?) We''re usually moving files from one directory to another, dropping items on trash bins, dragging email into folders, etc. I think those actions really deserve priority. We can carve out exception cases for list reordering, etc if we must, but let''s not block people from creating really functional UI''s. --- Thomas Fuchs <thomas@fesch.at> wrote:> The problem I see with this is both HTML (e.g. LI > elements should be > in an UL or OL) > and CSS classes. I can''t see a nice way around > this... :| > > Thomas > > Am 30.09.2005 um 13:37 schrieb San Trois: > > > Desired state: > > > > *) Clone placed in the top level document object > so it > > can float above all elements > > _______________________________________________ > Rails-spinoffs mailing list > Rails-spinoffs@lists.rubyonrails.org >http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs>__________________________________ Yahoo! Mail - PC Magazine Editors'' Choice 2005 http://mail.yahoo.com
If it''s any inspiration for some javascript hackers,
here''s some example code from how dojo handles this:
Arbritrary movement of LI items across lists:
http://archive.dojotoolkit.org/nightly/tests/dnd/test_simple.html
or
Arbitrary DIV repositioning between nested DIV''s:
http://archive.dojotoolkit.org/nightly/tests/dnd/test_nested_drop_targets.html
The targets have name based ''accept'' lists. So:
new dojo.dnd.HtmlDropTarget(drop_element1,
["blue_item"]);
new dojo.dnd.HtmlDropTarget(drop_element2,
["blue_item", "black_item"]);
for (x in black_blah) {
new dojo.dnd.HtmlDragSource(list_element[x],
"black_item");
}
Would allow only blue items on one target, but black
and blue items on the other target (["*"] equals
''accept any source'').
Interesting stuff.
--- Thomas Fuchs <thomas@fesch.at> wrote:
> The problem I see with this is both HTML (e.g. LI
> elements should be
> in an UL or OL)
> and CSS classes. I can''t see a nice way around
> this... :|
>
> Thomas
>
> Am 30.09.2005 um 13:37 schrieb San Trois:
>
> > Desired state:
> >
> > *) Clone placed in the top level document object
> so it
> > can float above all elements
>
> _______________________________________________
> Rails-spinoffs mailing list
> Rails-spinoffs@lists.rubyonrails.org
>
http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs>
__________________________________
Yahoo! Mail - PC Magazine Editors'' Choice 2005
http://mail.yahoo.com
Erin Mulder
2005-Oct-12 11:23 UTC
[Rails-spinoffs] Re: Draggables and overflow div''s revisited
San Trois wrote:> Desired state: > > *) Drags a clone of the element > *) Clone placed in the top level document object so it can float > above all elements > *) Drop target can return ''success'' or ''failure'' and that > determines if release animation is run (or other arbitrary > event code). > *) Release animation doesn''t get confused in scrollable > containers (should be unaffected).This is the behavior I''m looking for as well. So far, I''ve had most of the troubles described in this thread. I tried ghosting, but that has the z-order and revert animation problems. I tried adjusting startDrag and stopDrag so that the element is cloned and attached to a top-level element, but had trouble getting the coordinates right (once detached from the scrollable div, it jumps down to where it would be if there was no scrollbar). Also, the revert animation was pretty awful. The clone approach may be salvageable, but we need to find a way to get the coordinates right and to override the revert. In my particular case, I''m dragging content from one scrollable div into another (users can search for content in a sidebar and then drag and drop it into timeslots on a schedule). Having a revert animation isn''t critical, but if it is there, it needs to work right, and I don''t want it to make the original image disappear. Instead, the ghosted image should be a clone that just merges back with the original and disappears. BTW, here''s a page with a few examples of the problem: http://www.opentools.org/phillyonrails/dnd-trouble/ I''m going to keep playing around to try to get something working, but would appreciate any help! :) Cheers, Erin
Joe Black
2005-Oct-12 11:43 UTC
[Rails-spinoffs] Re: Draggables and overflow div''s revisited
I was browsing the prototype source the other day and found something
you might find useful. Of course you may have already found this. But
check starting at line 1386 in prototype 1.4.0_pre11
// set to true if needed, warning: firefox performance problems
// NOT neeeded for page scrolling, only if draggable contained in
// scrollable elements
includeScrollOffsets: false,
I know very little javascript but it seems like this might be useful.
Thanks,
Joe
Erin Mulder wrote:
>San Trois wrote:
>
>
>>Desired state:
>>
>>*) Drags a clone of the element
>>*) Clone placed in the top level document object so it can float
>> above all elements
>>*) Drop target can return ''success'' or
''failure'' and that
>> determines if release animation is run (or other arbitrary
>> event code).
>>*) Release animation doesn''t get confused in scrollable
>> containers (should be unaffected).
>>
>>
>
>This is the behavior I''m looking for as well.
>
>So far, I''ve had most of the troubles described in this thread. I
tried
>ghosting, but that has the z-order and revert animation problems. I
>tried adjusting startDrag and stopDrag so that the element is cloned and
>attached to a top-level element, but had trouble getting the coordinates
>right (once detached from the scrollable div, it jumps down to where it
>would be if there was no scrollbar). Also, the revert animation was
>pretty awful.
>
>The clone approach may be salvageable, but we need to find a way to get
>the coordinates right and to override the revert.
>
>In my particular case, I''m dragging content from one scrollable div
into
>another (users can search for content in a sidebar and then drag and
>drop it into timeslots on a schedule). Having a revert animation
isn''t
>critical, but if it is there, it needs to work right, and I don''t
want
>it to make the original image disappear. Instead, the ghosted image
>should be a clone that just merges back with the original and disappears.
>
>BTW, here''s a page with a few examples of the problem:
>
>http://www.opentools.org/phillyonrails/dnd-trouble/
>
>I''m going to keep playing around to try to get something working,
but
>would appreciate any help! :)
>
>Cheers,
>Erin
>_______________________________________________
>Rails-spinoffs mailing list
>Rails-spinoffs@lists.rubyonrails.org
>http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
>
>
>
>
>
Erin Mulder
2005-Oct-15 15:31 UTC
[Rails-spinoffs] Re: Draggables and overflow div''s revisited
Erin Mulder wrote:> So far, I''ve had most of the troubles described in this thread. I tried > ghosting, but that has the z-order and revert animation problems. I > tried adjusting startDrag and stopDrag so that the element is cloned and > attached to a top-level element, but had trouble getting the coordinates > right (once detached from the scrollable div, it jumps down to where it > would be if there was no scrollbar). Also, the revert animation was > pretty awful. > > The clone approach may be salvageable, but we need to find a way to get > the coordinates right and to override the revert.FYI, one of the guys on the PhillyOnRails list has come up with a pretty good solution to this. Using his dragdrop.js patch, drag and drop from scrollable div to scrollable div works great. The only thing left to do is clean up the revert animation. I''ll try to get him to post it to this list too, but meanwhile, drop me a line if you need the code. Cheers, Erin
Joe Black
2005-Oct-15 15:41 UTC
[Rails-spinoffs] Re: Draggables and overflow div''s revisited
I would most certainly like a copy of the patch. This is the kind of thing I''ve wanted to use in my app but gave up on because of all the problems with overflow''d divs. Thank you very much for your time, Joe Erin Mulder wrote:>Erin Mulder wrote: > > >>So far, I''ve had most of the troubles described in this thread. I tried >>ghosting, but that has the z-order and revert animation problems. I >>tried adjusting startDrag and stopDrag so that the element is cloned and >>attached to a top-level element, but had trouble getting the coordinates >>right (once detached from the scrollable div, it jumps down to where it >>would be if there was no scrollbar). Also, the revert animation was >>pretty awful. >> >>The clone approach may be salvageable, but we need to find a way to get >>the coordinates right and to override the revert. >> >> > >FYI, one of the guys on the PhillyOnRails list has come up with a pretty >good solution to this. Using his dragdrop.js patch, drag and drop from >scrollable div to scrollable div works great. The only thing left to do >is clean up the revert animation. > >I''ll try to get him to post it to this list too, but meanwhile, drop me >a line if you need the code. > >Cheers, >Erin >_______________________________________________ >Rails-spinoffs mailing list >Rails-spinoffs@lists.rubyonrails.org >http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs > > > > >
Hi Erin, Please post it here! Thanks! -S --- Joe Black <joeblackde-PkbjNfxxIARBDgjK7y7TUQ@public.gmane.org> wrote:> I would most certainly like a copy of the patch. > This is the kind of > thing I''ve wanted to use in my app but gave up on > because of all the > problems with overflow''d divs. > > Thank you very much for your time, > > Joe > > Erin Mulder wrote: > > >Erin Mulder wrote: > > > > > >>So far, I''ve had most of the troubles described in > this thread. I tried > >>ghosting, but that has the z-order and revert > animation problems. I > >>tried adjusting startDrag and stopDrag so that the > element is cloned and > >>attached to a top-level element, but had trouble > getting the coordinates > >>right (once detached from the scrollable div, it > jumps down to where it > >>would be if there was no scrollbar). Also, the > revert animation was > >>pretty awful. > >> > >>The clone approach may be salvageable, but we need > to find a way to get > >>the coordinates right and to override the revert. > >> > >> > > > >FYI, one of the guys on the PhillyOnRails list has > come up with a pretty > >good solution to this. Using his dragdrop.js > patch, drag and drop from > >scrollable div to scrollable div works great. The > only thing left to do > >is clean up the revert animation. > > > >I''ll try to get him to post it to this list too, > but meanwhile, drop me > >a line if you need the code. > > > >Cheers, > >Erin > >_______________________________________________ > >Rails-spinoffs mailing list > >Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org > >http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs > > > > > > > > > > > > > _______________________________________________ > Rails-spinoffs mailing list > Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org >http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs>__________________________________ Yahoo! Mail - PC Magazine Editors'' Choice 2005 http://mail.yahoo.com
Howdy. Here''s a pretty-well-working fix to the draggable div inside
an over problem. Its important to node that Safari/KTML doesn''t need
any of
this. It works quite well by default.
I''ve posted the patched version of Erin''s demo at
http://sigel.ath.cx:8080/dnd-trouble/ The full patch is dnd.diff.
It''ll be easiest to just download prototype.js, and dragdrop.js (which
are vanilla save the following changes). If you''re curious, the
changes
are as follows:
First, a fix to the script.aculo.us <http://script.aculo.us> code that
allow the dragging DIV to temporarily bind to the document''s body,
instead of its parent. I
implemented it as a flag ("detached") to the Draggable constructor, so
it''ll look like:
new Draggable(''draggingDiv'', {detached:true});
The following if block around line 295 in dragdrop.js
(Draggable.update) will bind the DIV to the body:
if(this.options.detached) {
// First, we need to clone the origional element
this._shadow = this.element.cloneNode(true);
Position.absolutize(this.element);
// Hide the shadow
this._shadow.style.visibility="hidden";
// Then put the shadow in the origional element''s place
this.element.parentNode.insertBefore(this._shadow, this.element);
// and attach the element to the document body
document.getElementsByTagName("body").item(0).appendChild(this.element);
}
And this block at line 212 at the beginning of the finishDrag method
will rebind it to its origional position.
if(this.options.detached) {
this._shadow.parentNode.insertBefore(this.element, this._shadow);
Position.relativize(this.element);
Element.remove(this._shadow);
this._shadow = null;
}
That''ll now bind div where draggable:true to the body, thus fixing
most of the overflow problems.
Prototype will still return an incorrect position of the DIV when its
somewhere nested in a scrolling div.
Around line 1200 in prototype.js, the cumulativeOffset function should
be changed to compensate for real offset.
cumulativeOffset: function(element) {
var valueT = 0, valueL = 0;
var offset = this.realOffset(element);
valueT -= offset[1];
valueL -= offset[0];
do {
valueT += element.offsetTop || 0;
valueL += element.offsetLeft || 0;
element = element.offsetParent;
} while (element);
return [valueL, valueT];
}
The condition of realOffset should also be changed from whil(element)
to while(element !- document.body). The scroll position of the
entire page should *not* effect the real offset, which is what
accounting for the body offset will do.
That should mostly do the trick.
_______________________________________________
Rails-spinoffs mailing list
Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs