Cheers, I have some elements inside a div with overflow:auto. When I trie to drag them outside of the div, the div starts to scroll. Is there a way to stop this behaviour for drag and drop? I thought of maybe using callback to disable the overflow and restoring it againg after the drop. Did someone implemented something like this? Thanks, Jonathan -- Jonathan Weiss http://blog.innerewut.de
> I have some elements inside a div with overflow:auto. When I trie to > drag them outside of the div, the div starts to scroll. Is there a way > to stop this behaviour for drag and drop? > > I thought of maybe using callback to disable the overflow and restoring > it againg after the drop. Did someone implemented something like this? >To answer myself: Draggables.addObserver({ onStart: my_function_to_remove_overflow, onEnd: my_function_to_restore_overflow }) Jonathan -- Jonathan Weiss http://blog.innerewut.de
Another question on drag and drop. Is there a way to disable scrolling? There is the option ''scroll'' set to false in the code but scrolling is used anyway. Jonathan -- Jonathan Weiss http://blog.innerewut.de
Hi Jonathan, Do you have an example of how you have implemented this at all? I think I would like to do a similar sort of thing like what this slide transition is like http://developer.yahoo.com/ypatterns/pattern.php?pattern=slide but instead of having to click the arrows the div will slide following a hover event, On 5/29/06, Jonathan Weiss <jw-eM0Q5iXcOashFhg+JK9F0w@public.gmane.org> wrote:> > Another question on drag and drop. > > Is there a way to disable scrolling? > > There is the option ''scroll'' set to false in the code but scrolling is > used anyway. > > > Jonathan > > -- > Jonathan Weiss > http://blog.innerewut.de > _______________________________________________ > 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
I''ve used something similar to the following:
var ListDragObserver = Class.create();
ListDragObserver.prototype = {
initialize: function(element) {
this.element = $(element);
},
onEnd: function (eventName, draggable, event) {
this.element.style.overflow = "auto";
},
onStart: function (eventName, draggable, event) {
this.element.style.overflow = "hidden";
},
onDrag: function (eventName, draggable, event) {}
}
Draggables.addObserver(new ListDragObserver("someElement"));
With regard to your scrolling question, what is your issue, exactly?
If it''s simply the presence of scroll bars, it''s likely a CSS
issue,
not a javascript one.
TAG
On May 29, 2006, at 5:54 AM, Jonathan Weiss wrote:
>
>> I have some elements inside a div with overflow:auto. When I trie
>> to drag them outside of the div, the div starts to scroll. Is
>> there a way to stop this behaviour for drag and drop?
>> I thought of maybe using callback to disable the overflow and
>> restoring it againg after the drop. Did someone implemented
>> something like this?
>
> To answer myself:
>
>
> Draggables.addObserver({
> onStart: my_function_to_remove_overflow,
> onEnd: my_function_to_restore_overflow
> })
>
>
> Jonathan
>
> --
> Jonathan Weiss
> http://blog.innerewut.de
> _______________________________________________
> Rails-spinoffs mailing list
> Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
> http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
Cheers, Tom Gregory wrote:> I''ve used something similar to the following: > > var ListDragObserver = Class.create(); > ListDragObserver.prototype = { > initialize: function(element) { > this.element = $(element); > }, > onEnd: function (eventName, draggable, event) { > this.element.style.overflow = "auto"; > }, > onStart: function (eventName, draggable, event) { > this.element.style.overflow = "hidden"; > }, > onDrag: function (eventName, draggable, event) {} > } > > > Draggables.addObserver(new ListDragObserver("someElement")); > >Thanks, I now have something like this in use.> With regard to your scrolling question, what is your issue, exactly? If > it''s simply the presence of scroll bars, it''s likely a CSS issue, not a > javascript one. > >Yes, it is now more a CSS problem. I need to disable the scroll/auto so that I can drag outside the container but hidden does not work as the dragged element is hidden when dragging out of the container (which makes sense). When I disable overflow the content of the div flows over another and the dragged element ''ghost image'' is jumping to the bottom of the page. I assume that this happens because with the overflow restriction gone, the content expands (moving my draggable div to the bottom) and the JS code still thinks that it''s position is unchanged. It''s difficult to explain but the solution would be to disable scrolling while dragging but still preserve the overflow CSS. So that the overflow style is still in place but not triggered by the drag.> > TAG >Regards, Jonathan
Check out my posts from back in February on this topic... my version of dragdrop.js uses cloning to overcome this problem... http://wrath.rubyonrails.org/pipermail/rails-spinoffs/2006-February/002599.html On 6/1/06, Jonathan Weiss <jw-eM0Q5iXcOashFhg+JK9F0w@public.gmane.org> wrote:> > Cheers, > > Tom Gregory wrote: > > I''ve used something similar to the following: > > > > var ListDragObserver = Class.create(); > > ListDragObserver.prototype = { > > initialize: function(element) { > > this.element = $(element); > > }, > > onEnd: function (eventName, draggable, event) { > > this.element.style.overflow = "auto"; > > }, > > onStart: function (eventName, draggable, event) { > > this.element.style.overflow = "hidden"; > > }, > > onDrag: function (eventName, draggable, event) {} > > } > > > > > > Draggables.addObserver(new ListDragObserver("someElement")); > > > > > > Thanks, I now have something like this in use. > > > With regard to your scrolling question, what is your issue, exactly? If > > it''s simply the presence of scroll bars, it''s likely a CSS issue, not a > > javascript one. > > > > > > Yes, it is now more a CSS problem. I need to disable the scroll/auto so > that I can drag outside the container but hidden does not work as the > dragged element is hidden when dragging out of the container (which > makes sense). > > When I disable overflow the content of the div flows over another and > the dragged element ''ghost image'' is jumping to the bottom of the page. > I assume that this happens because with the overflow restriction gone, > the content expands (moving my draggable div to the bottom) and the JS > code still thinks that it''s position is unchanged. > > It''s difficult to explain but the solution would be to disable scrolling > while dragging but still preserve the overflow CSS. So that the > overflow style is still in place but not triggered by the drag. > > > > > TAG > > > > Regards, > Jonathan > _______________________________________________ > 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
Ah, yes. I did have this problem. I ended up getting around it in an odd sort of way: instead of making my list items draggables, I trapped the onclick for the list items, and manually created a div with a higher z-index, which I instantiated as a Draggable and fired the proper functions to begin dragging. It''s a bit kludgy, but from the user side it works well. TAG On Jun 1, 2006, at 1:15 PM, Jonathan Weiss wrote:> Yes, it is now more a CSS problem. I need to disable the scroll/ > auto so that I can drag outside the container but hidden does not > work as the dragged element is hidden when dragging out of the > container (which makes sense). > > When I disable overflow the content of the div flows over another > and the dragged element ''ghost image'' is jumping to the bottom of > the page. I assume that this happens because with the overflow > restriction gone, the content expands (moving my draggable div to > the bottom) and the JS code still thinks that it''s position is > unchanged. > > It''s difficult to explain but the solution would be to disable > scrolling while dragging but still preserve the overflow CSS. So > that the overflow style is still in place but not triggered by the > drag. > > Regards, > Jonathan > _______________________________________________ > Rails-spinoffs mailing list > Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org > http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
Ryan Gahl wrote:> Check out my posts from back in February on this topic... my version of > dragdrop.js uses cloning to overcome this problem... > > > http://wrath.rubyonrails.org/pipermail/rails-spinoffs/2006-February/002599.html > >Fantastic, this is exaclty what I needed. Did you also submit it as a patch? Now I just have to solve a problem with IE. When I define my Draggables, their layout gets changed in IE... Thanks, Jonathan
> > Fantastic, this is exaclty what I needed. Did you also submit it as a > patch? >I have one issue with this lib though. On the draggable elements I use a onclick handler to change the background color. This works on the first click but fails on the second. If I revert back to the original drapndrop.js, everything is ok again. Regards, Jonathan -- Jonathan Weiss http://blog.innerewut.de
Meh... no I''m sorry I never got around to submitting a patch. I had good intentions to, but crazy life stuff has been keeping me from that sort of extra cirricular activity... Umm... as far as your event handling goes, it creates a clone, but I''m not sure at this point in time (it''s been a while!!) about what would happen with event handlers, et al... Umm... sorry dude, play around with it some, I''m sure it can be handled eligantly, I''m just, well, verybizzy. On 6/2/06, Jonathan Weiss <jw-eM0Q5iXcOashFhg+JK9F0w@public.gmane.org> wrote:> > > > > > Fantastic, this is exaclty what I needed. Did you also submit it as a > > patch? > > > > I have one issue with this lib though. On the draggable elements I use a > onclick handler to change the background color. This works on the first > click but fails on the second. > > If I revert back to the original drapndrop.js, everything is ok again. > > > Regards, > Jonathan > > -- > Jonathan Weiss > http://blog.innerewut.de > _______________________________________________ > 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