When using drag and drop, the browser window will not scroll if you move the mouse off the page. This makes it very difficult, if not impossible to create certain types of web applications. I know this has been mentioned before and is on the Wish List, but it''s very frustrating. If you look at this other Javascript library called "Drag''nDrop & DHTML Library" here: http://www.walterzorn.com/dragdrop/dragdrop_e.htm ...you''ll notice that his implements the window scrolling when you drag elements around. Is this maybe a Prototype issue? I know that OpenRico has the same problem. Thanks. -- ___________________________________________________ Play 100s of games for FREE! http://games.mail.com/
Hi, does anyone know the status of the scroll-less drag & drop issue (as outlined below)? At least if I know Scriptaculous has no intention of implementing it, I can use a different DHTML library instead. Thanks, James *** Original Message *** ---------------------------------- When using drag and drop, the browser window will not scroll if you move the mouse off the page. This makes it very difficult, if not impossible to create certain types of web applications. I know this has been mentioned before and is on the Wish List, but it''s very frustrating. If you look at this other Javascript library called "Drag''nDrop & DHTML Library" here: http://www.walterzorn.com/dragdrop/dragdrop_e.htm ...you''ll notice that his implements the window scrolling when you drag elements around. Is this maybe a Prototype issue? I know that OpenRico has the same problem. Thanks. --------------------------------- -- ___________________________________________________ Play 100s of games for FREE! http://games.mail.com/
Is anyone currently looking into this? If not, I can take a stab at it. I think it would definitely be a useful thing to add to scriptaculous. Greg -----Original Message----- From: rails-spinoffs-bounces-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org [mailto:rails-spinoffs-bounces-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org] On Behalf Of James Peters Sent: Wednesday, November 09, 2005 11:02 AM To: rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org Subject: Re: [Rails-spinoffs] Drag & Scroll Hi, does anyone know the status of the scroll-less drag & drop issue (as outlined below)? At least if I know Scriptaculous has no intention of implementing it, I can use a different DHTML library instead. Thanks, James *** Original Message *** ---------------------------------- When using drag and drop, the browser window will not scroll if you move the mouse off the page. This makes it very difficult, if not impossible to create certain types of web applications. I know this has been mentioned before and is on the Wish List, but it''s very frustrating. If you look at this other Javascript library called "Drag''nDrop & DHTML Library" here: http://www.walterzorn.com/dragdrop/dragdrop_e.htm ...you''ll notice that his implements the window scrolling when you drag elements around. Is this maybe a Prototype issue? I know that OpenRico has the same problem. Thanks. --------------------------------- -- ___________________________________________________ Play 100s of games for FREE! http://games.mail.com/ _______________________________________________ Rails-spinoffs mailing list Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
I''ve got a version now that works in Mozilla (Firefox 1.0.7), but it doesn''t work at all in Opera or IE. Basically, Opera and IE won''t scroll farther than the original document size. I''m not sure how that other dude got around that; I''ve been reading his code for almost 2 hours and I just don''t see anything extra he''s done to make it work. I''ve tried window.scrollTo(), window.scroll(), window.scrollBy(), and element.scrollIntoView(). All of them work in Mozilla, none work in any other browser. I know it''s possible because that site you sent has it working, but I''m missing something. Anyone got any ideas? I have a feeling I just need to tell the window to have a larger scrollable area, but I can''t find any way to do that. Greg Here''s all the code I have so far (my code in bold): draw: function(event) { ... this.scrollIntoView(); }, scrollIntoView: function() { var offsets = Position.cumulativeOffset(this.element); var x = offsets[0]; var y = offsets[1]; var scrollX = 0; var scrollY = 0; if ( (x < document.body.scrollLeft + 5 && x > 0) || (y < document.body.scrollTop + 5 && y > 0) ) { scrollX = -5; scrollY = -5; } else { var elDimensions = Element.getDimensions(this.element); var winDimensions = { width: window.innerWidth || document.body.clientWidth, height: window.innerHeight || document.body.clientHeight }; if (x + elDimensions.width > winDimensions.width - 5) { this.element.style.left (parseInt(this.element.style.left.replace(/px/,'''')) + 5) + ''px''; scrollX = 5; } if (y + elDimensions.height > winDimensions.height - 5) { this.element.style.top (parseInt(this.element.style.top.replace(/px/,'''')) + 5) + ''px''; scrollY = 5; } } if (scrollX != 0 || scrollY != 0) { window.scrollBy(scrollX, scrollY); this.movedSinceScrolled = false; } // if we still have an active drag but the mouse hasn''t moved since we started // scrolling, keep scrolling until they move it again if (this.active && ! this.movedSinceScrolled) { setTimeout(this.scrollIntoView.bind(this), 100); } }, update: function(event) { if(this.active) { this.movedSinceScrolled = true; ... -----Original Message----- From: rails-spinoffs-bounces-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org [mailto:rails-spinoffs-bounces-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org] On Behalf Of Gregory Hill Sent: Wednesday, November 09, 2005 11:04 AM To: rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org Subject: RE: [Rails-spinoffs] Drag & Scroll Is anyone currently looking into this? If not, I can take a stab at it. I think it would definitely be a useful thing to add to scriptaculous. Greg -----Original Message----- From: rails-spinoffs-bounces-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org [mailto:rails-spinoffs-bounces-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org] On Behalf Of James Peters Sent: Wednesday, November 09, 2005 11:02 AM To: rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org Subject: Re: [Rails-spinoffs] Drag & Scroll Hi, does anyone know the status of the scroll-less drag & drop issue (as outlined below)? At least if I know Scriptaculous has no intention of implementing it, I can use a different DHTML library instead. Thanks, James *** Original Message *** ---------------------------------- When using drag and drop, the browser window will not scroll if you move the mouse off the page. This makes it very difficult, if not impossible to create certain types of web applications. I know this has been mentioned before and is on the Wish List, but it''s very frustrating. If you look at this other Javascript library called "Drag''nDrop & DHTML Library" here: http://www.walterzorn.com/dragdrop/dragdrop_e.htm ...you''ll notice that his implements the window scrolling when you drag elements around. Is this maybe a Prototype issue? I know that OpenRico has the same problem. Thanks. --------------------------------- -- ___________________________________________________ Play 100s of games for FREE! http://games.mail.com/ _______________________________________________ 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 _______________________________________________ Rails-spinoffs mailing list Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
Thank you Greg for attempting this! I''m not sure if this helps, but WebGUI CMS also has its own drag/drop functionality that works with scrolling. The demo can be viewed here: http://www.plainblack.com/demo His source is in perl, but of course the drag/drop is Javascript. Thanks again Greg, James *** Original Message *** ---------------------------------- I''ve got a version now that works in Mozilla (Firefox 1.0.7), but it doesn''t work at all in Opera or IE. Basically, Opera and IE won''t scroll farther than the original document size. I''m not sure how that other dude got around that; I''ve been reading his code for almost 2 hours and I just don''t see anything extra he''s done to make it work. I''ve tried window.scrollTo(), window.scroll(), window.scrollBy(), and element.scrollIntoView(). All of them work in Mozilla, none work in any other browser. I know it''s possible because that site you sent has it working, but I''m missing something. Anyone got any ideas? I have a feeling I just need to tell the window to have a larger scrollable area, but I cant find any way to do that. Greg Here''s all the code I have so far (my code in bold): draw: function(event) { ... this.scrollIntoView(); }, scrollIntoView: function() { var offsets = Position.cumulativeOffset(this.element); var x = offsets[0]; var y = offsets[1]; var scrollX = 0; var scrollY = 0; if ( (x < document.body.scrollLeft + 5 && x > 0) || (y < document.body.scrollTop + 5 && y > 0) ) { scrollX = -5; scrollY = -5; } else { var elDimensions = Element.getDimensions(this.element); var winDimensions = { width: window.innerWidth || document.body.clientWidth, height: window.innerHeight || document.body.clientHeight }; if (x + elDimensions.width > winDimensions.width - 5) { this.element.style.left = (parseInt(this.element.style.left.replace(/px/,'''')) + 5) + ''px''; scrollX = 5; } if (y + elDimensions.height > winDimensions.height - 5) { this.element.style.top = (parseInt(this.element.style.top.replace(/px/,'''')) + 5) + ''px''; scrollY = 5; } } if (scrollX != 0 || scrollY != 0) { window.scrollBy(scrollX, scrollY); this.movedSinceScrolled = false; } // if we still have an active drag but the mouse hasn''t moved since we started // scrolling, keep scrolling until they move it again if (this.active && ! this.movedSinceScrolled) { setTimeout(this.scrollIntoView.bind(this), 100); } }, update: function(event) { if(this.active) { this.movedSinceScrolled = true; ... -- ___________________________________________________ Play 100s of games for FREE! http://games.mail.com/
Well, the demo doesn''t let you drag wherever you want. It just lets you drag vertically, and event then, only within a pre-defined area. Or am I missing something? I don''t see anywhere that lets you drag stuff beyond the currently-scrollable size of the window. Greg -----Original Message----- From: rails-spinoffs-bounces-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org [mailto:rails-spinoffs-bounces-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org] On Behalf Of James Peters Sent: Wednesday, November 09, 2005 2:45 PM To: rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org Subject: RE: [Rails-spinoffs] Drag & Scroll Thank you Greg for attempting this! I''m not sure if this helps, but WebGUI CMS also has its own drag/drop functionality that works with scrolling. The demo can be viewed here: http://www.plainblack.com/demo His source is in perl, but of course the drag/drop is Javascript. Thanks again Greg, James *** Original Message *** ---------------------------------- I''ve got a version now that works in Mozilla (Firefox 1.0.7), but it doesn''t work at all in Opera or IE. Basically, Opera and IE won''t scroll farther than the original document size. I''m not sure how that other dude got around that; I''ve been reading his code for almost 2 hours and I just don''t see anything extra he''s done to make it work. I''ve tried window.scrollTo(), window.scroll(), window.scrollBy(), and element.scrollIntoView(). All of them work in Mozilla, none work in any other browser. I know it''s possible because that site you sent has it working, but I''m missing something. Anyone got any ideas? I have a feeling I just need to tell the window to have a larger scrollable area, but I can''t find any way to do that. Greg Here''s all the code I have so far (my code in bold): draw: function(event) { ... this.scrollIntoView(); }, scrollIntoView: function() { var offsets = Position.cumulativeOffset(this.element); var x = offsets[0]; var y = offsets[1]; var scrollX = 0; var scrollY = 0; if ( (x < document.body.scrollLeft + 5 && x > 0) || (y < document.body.scrollTop + 5 && y > 0) ) { scrollX = -5; scrollY = -5; } else { var elDimensions = Element.getDimensions(this.element); var winDimensions = { width: window.innerWidth || document.body.clientWidth, height: window.innerHeight || document.body.clientHeight }; if (x + elDimensions.width > winDimensions.width - 5) { this.element.style.left = (parseInt(this.element.style.left.replace(/px/,'''')) + 5) + ''px''; scrollX = 5; } if (y + elDimensions.height > winDimensions.height - 5) { this.element.style.top = (parseInt(this.element.style.top.replace(/px/,'''')) + 5) + ''px''; scrollY = 5; } } if (scrollX != 0 || scrollY != 0) { window.scrollBy(scrollX, scrollY); this.movedSinceScrolled = false; } // if we still have an active drag but the mouse hasn''t moved since we started // scrolling, keep scrolling until they move it again if (this.active && ! this.movedSinceScrolled) { setTimeout(this.scrollIntoView.bind(this), 100); } }, update: function(event) { if(this.active) { this.movedSinceScrolled = true; ... -- ___________________________________________________ Play 100s of games for FREE! http://games.mail.com/ _______________________________________________ Rails-spinoffs mailing list Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
Hmmm, when I log in with "Admin", "123qwe", and then turn the Admin mode on, the first page (Home) has 2 blocks that are draggable (horizontally & vertically) and they do end up scrolling since together they''re larger vertically than the screen''s area. (That was using IE). When I use Firefox 1.5, it still scrolls, but it doesn''t drag around the same way IE does. Bloody lack of standards... James ----- Original Message ----- Well, the demo doesn''t let you drag wherever you want. It just lets you drag vertically, and event then, only within a pre-defined area. Or am I missing something? I don''t see anywhere that lets you drag stuff beyond the currently-scrollable size of the window. Greg -- ___________________________________________________ Play 100s of games for FREE! http://games.mail.com/
Does it let you drag it horizontally, automatically scrolling with you, if there is no horizontal scrollbar? If so, then email me the url to the js file they use and I''ll check it out. I tweaked my code a bit more, but it still has issues. It works great in Firefox. It also works in IE and Opera, so long as you don''t try to drag past the end of the scrollbar (i.e. it scrolls along as long as there is a scrollbar to move). It doesn''t work in Safari at all. Anyone is free to try it out and pitch in ideas. Copy and paste this code into a .js file and include it after you include scriptaculous (since it overloads functions from dragdrop.js), and you should have what I have so far: Object.extend(Draggable.prototype, { oldUpdate: Draggable.prototype.update, oldDraw: Draggable.prototype.draw, draw: function(event) { this.oldDraw(event); this.scrollIntoView(); }, scrollIntoView: function() { var offsets = Position.cumulativeOffset(this.element); var x = offsets[0]; var y = offsets[1]; var scrollX = 0; var scrollY = 0; if ( (x < document.body.scrollLeft + 5 && x > 0) || (y < document.body.scrollTop + 5 && y > 0) ) { scrollX = -5; scrollY = -5; } else { var elDimensions = Element.getDimensions(this.element); var winDimensions = Element.getDimensions(document.body); if (x + elDimensions.width > winDimensions.width - 5) { this.element.style.left (parseInt(this.element.style.left.replace(/px/,'''')) + 5) + ''px''; scrollX = 5; } if (y + elDimensions.height > winDimensions.height - 5) { this.element.style.top (parseInt(this.element.style.top.replace(/px/,'''')) + 5) + ''px''; scrollY = 5; } } if (scrollX != 0 || scrollY != 0) { window.scrollTo(document.body.scrollLeft + scrollX, document.body.scrollTop + scrollY); this.movedSinceScrolled = false; } // if we still have an active drag but the mouse hasn''t moved since we started // scrolling, keep scrolling until they move it again if (this.active && ! this.movedSinceScrolled) { setTimeout(this.scrollIntoView.bind(this), 200); } }, update: function(event) { if (this.active) { this.movedSinceScrolled = true; } this.oldUpdate(event); } }); -----Original Message----- From: rails-spinoffs-bounces-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org [mailto:rails-spinoffs-bounces-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org] On Behalf Of James Peters Sent: Wednesday, November 09, 2005 3:24 PM To: rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org Subject: RE: [Rails-spinoffs] Drag & Scroll Hmmm, when I log in with "Admin", "123qwe", and then turn the Admin mode on, the first page (Home) has 2 blocks that are draggable (horizontally & vertically) and they do end up scrolling since together they''re larger vertically than the screen''s area. (That was using IE). When I use Firefox 1.5, it still scrolls, but it doesn''t drag around the same way IE does. Bloody lack of standards... James ----- Original Message ----- Well, the demo doesn''t let you drag wherever you want. It just lets you drag vertically, and event then, only within a pre-defined area. Or am I missing something? I don''t see anywhere that lets you drag stuff beyond the currently-scrollable size of the window. Greg -- ___________________________________________________ Play 100s of games for FREE! http://games.mail.com/ _______________________________________________ Rails-spinoffs mailing list Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
Yeah it lets me drag both horizontally & vertically, but only if there is room to scroll (as it should). So if there is no horizontal scrollbar, it won''t scroll horizontally - unlike your solution at the moment. Here is the javascript - I hope it''s all self-contained: http://demo.plainblack.com/extras/draggable.js It looks like your solution is a great start, but it''s pretty jumpy and seems to keep scrolling even when there''s no more room to scroll, but that might be a problem with scriptaculous/prototype since (in Firefox not IE) when I drag my DIV either to the right (off the page) or down (off the page), it turns on the scrollbars and increases the scrollable area automatically. Not sure how easy that is to fix. James ----- Original Message ----- Does it let you drag it horizontally, automatically scrolling with you, if there is no horizontal scrollbar? If so, then email me the url to the js file they use and I''ll check it out. I tweaked my code a bit more, but it still has issues. It works great in Firefox. It also works in IE and Opera, so long as you don''t try to drag past the end of the scrollbar (i.e. it scrolls along as long as there is a scrollbar to move). It doesn''t work in Safari at all. Anyone is free to try it out and pitch in ideas. Copy and paste this code into a .js file and include it after you include scriptaculous (since it overloads functions from dragdrop.js), and you should have what I have so far: Object.extend(Draggable.prototype, { oldUpdate: Draggable.prototype.update, oldDraw: Draggable.prototype.draw, draw: function(event) { this.oldDraw(event); this.scrollIntoView(); }, scrollIntoView: function() { var offsets = Position.cumulativeOffset(this.element); var x = offsets[0]; var y = offsets[1]; var scrollX = 0; var scrollY = 0; if ( (x < document.body.scrollLeft + 5 && x > 0) || (y < document.body.scrollTop + 5 && y > 0) ) { scrollX = -5; scrollY = -5; } else { var elDimensions = Element.getDimensions(this.element); var winDimensions = Element.getDimensions(document.body); if (x + elDimensions.width > winDimensions.width - 5) { this.element.style.left = (parseInt(this.element.style.left.replace(/px/,'''')) + 5) + ''px''; scrollX = 5; } if (y + elDimensions.height > winDimensions.height - 5) { this.element.style.top = (parseInt(this.element.style.top.replace(/px/,'''')) + 5) + ''px''; scrollY = 5; } } if (scrollX != 0 || scrollY != 0) { window.scrollTo(document.body.scrollLeft + scrollX, document.body.scrollTop + scrollY); this.movedSinceScrolled = false; } // if we still have an active drag but the mouse hasn''t moved since we started // scrolling, keep scrolling until they move it again if (this.active && ! this.movedSinceScrolled) { setTimeout(this.scrollIntoView.bind(this), 200); } }, update: function(event) { if (this.active) { this.movedSinceScrolled = true; } this.oldUpdate(event); } }); -- ___________________________________________________ Play 100s of games for FREE! http://games.mail.com/
I''m sorry! This mail is really not about script.aculo.us and prototype - its about some things i often need when using script.aculo.us and prototype. (Chances are some these functions already are available, but I missed them) It be getting/setting size and actual position of: - Elements - Window - Screen I have tried to implement it in prototype-style, and for those interested, the code is in the end of this mail. For those thinking "What a jerk", PLEASE delete this mail now as I know it really does''nt belong here. Never the less, I feel good about sharing this code to you guys! :-) It consists of 3 ''namespaces'': Geometry, System and Element(extends the original Element ''namespace''). *Short API-description:* Geometry.Size(width,height) //Usage: var size=new Geometry.Size(200,300); alert("Size is: "+size.width+"x"+size.height); Geometry.Position(x,y); //Usage: var pos=new Geometry.Position(20,30);alert("Pos. is: "+pos.x+"x"+pos.y); Element.getPosition(element); //Usage: var pos=Element.getPosition("myelement");alert("Pos. is: "+pos.x+"x"+pos.y); Element.setPosition(element,pos); //Usage: var pos=new Geometry.Position(20,30);Element.setPosition("myelement",pos); Element.getSize(element); //Usage: var size=Element.getSize("myelement"); alert("Size is: "+size.width+"x"+size.height); Element.setSize(element,size); //Usage: var size=new Geometry.Size(200,300); Element.setSize("myelement",size); System.getWindowSize(); //Usage: var size=System.getWindowSize(); alert("Size is: "+size.width+"x"+size.height); System.setWindowSize(size); //Usage: var size=new Geometry.Size(200,300); System.setWindowSize(size); System.getWindowPosition(); //Usage: var pos=System.getWindowPosition();alert("Pos. is: "+pos.x+"x"+pos.y); System.setWindowPosition(pos);//Usage: var pos=new Geometry.Position(200,200); System.setWindowPosition(pos); System.getScreenSize(availSpaceOnly); //Usage: var size=System.getScreenSize(true); alert("Size is: "+size.width+"x"+size.height); Best Regards Michael Krog /***************************************************** * Geometric classes *****************************************************/ var Geometry = { Size:function(width,height){ this.width=width; this.height=height; this.toString=function(){return this.width+"x"+this.height;} }, Position:function(x,y){ this.x=x; this.y=y; this.toString=function(){return this.x+"x"+this.y;} } } /****************************************************** * Geometric functions ******************************************************/ Object.extend(Element, { getPosition: function(element) { element=$(element); var left=element.offsetLeft,top=element.offsetTop; while (element.offsetParent.tagName != "BODY") { element = element.offsetParent; left += element.offsetLeft; top += element.offsetTop; } return new Geometry.Position(left,top); }, setPosition:function(element,pos){ element=$(element); element.style.left=pos.x; element.style.top=pos.y; }, getSize:function(element){ element=$(element); var width,height; if(element.style.display=="none"){ var visibility=element.style.visibility; element.style.visibility="hidden"; element.style.display=""; width=element.offsetWidth; height=element.offsetHeight; element.style.display="none"; element.style.visibility=visibility; } else{ width=element.offsetWidth; height=element.offsetHeight; } return new Geometry.Size(width,height); }, setSize:function(element,size){ element=$(element); element.style.width=size.width; element.style.height=size.height; } }) var System={ getWindowSize:function(){ if (navigator.appName=="Netscape") { return new Geometry.Size(window.innerWidth,window.innerHeight); } if (navigator.appName.indexOf("Microsoft")!=-1) { return new Geometry.Size(document.body.offsetWidth,document.body.offsetHeight); } }, getScreenSize:function(availableSpaceOnly){ if(availableSpaceOnly) return new Geometry.Size(screen.availWidth,screen.availHeight); else return new Geometry.Size(screen.width,screen.height); }, setWindowSize:function(size){ if (parseInt(navigator.appVersion)>3) { if (navigator.appName=="Netscape") { top.outerWidth=size.width; top.outerHeight=size.height; } else top.resizeTo(size.width,size.height); } }, setWindowPosition:function(pos){ top.window.moveTo(pos.x,pos.y); }, getWindowPosition:function(){ if(document.all){ //IE return new Geometry.Position(window.screenLeft,window.screenTop); } else{ return new Geometry.Position(window.screenX,window.screenY); } } } _______________________________________________ Rails-spinoffs mailing list Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
Oh, I thought the auto-adding of scrollbars was desired. That''s how that original one you sent me works. That''s what I''ve been racking my brain to fix in IE. Anyway, I doubt we can get around it in Mozilla-based browsers, but I can keep trying. I suppose if we can crack it, we should make it optional; maybe sometimes it is desirable and other times not. I''ll try to work on making it less jumpy. What I sent yesterday was obviously pretty rough draft at this point. Thanks for the feedback. Greg -----Original Message----- From: rails-spinoffs-bounces-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org [mailto:rails-spinoffs-bounces-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org] On Behalf Of James Peters Sent: Wednesday, November 09, 2005 5:22 PM To: rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org Subject: RE: [Rails-spinoffs] Drag & Scroll Yeah it lets me drag both horizontally & vertically, but only if there is room to scroll (as it should). So if there is no horizontal scrollbar, it won''t scroll horizontally - unlike your solution at the moment. Here is the javascript - I hope it''s all self-contained: http://demo.plainblack.com/extras/draggable.js It looks like your solution is a great start, but it''s pretty jumpy and seems to keep scrolling even when there''s no more room to scroll, but that might be a problem with scriptaculous/prototype since (in Firefox not IE) when I drag my DIV either to the right (off the page) or down (off the page), it turns on the scrollbars and increases the scrollable area automatically. Not sure how easy that is to fix. James ----- Original Message ----- Does it let you drag it horizontally, automatically scrolling with you, if there is no horizontal scrollbar? If so, then email me the url to the js file they use and I''ll check it out. I tweaked my code a bit more, but it still has issues. It works great in Firefox. It also works in IE and Opera, so long as you don''t try to drag past the end of the scrollbar (i.e. it scrolls along as long as there is a scrollbar to move). It doesn''t work in Safari at all. Anyone is free to try it out and pitch in ideas. Copy and paste this code into a .js file and include it after you include scriptaculous (since it overloads functions from dragdrop.js), and you should have what I have so far: Object.extend(Draggable.prototype, { oldUpdate: Draggable.prototype.update, oldDraw: Draggable.prototype.draw, draw: function(event) { this.oldDraw(event); this.scrollIntoView(); }, scrollIntoView: function() { var offsets = Position.cumulativeOffset(this.element); var x = offsets[0]; var y = offsets[1]; var scrollX = 0; var scrollY = 0; if ( (x < document.body.scrollLeft + 5 && x > 0) || (y < document.body.scrollTop + 5 && y > 0) ) { scrollX = -5; scrollY = -5; } else { var elDimensions = Element.getDimensions(this.element); var winDimensions = Element.getDimensions(document.body); if (x + elDimensions.width > winDimensions.width - 5) { this.element.style.left = (parseInt(this.element.style.left.replace(/px/,'''')) + 5) + ''px''; scrollX = 5; } if (y + elDimensions.height > winDimensions.height - 5) { this.element.style.top = (parseInt(this.element.style.top.replace(/px/,'''')) + 5) + ''px''; scrollY = 5; } } if (scrollX != 0 || scrollY != 0) { window.scrollTo(document.body.scrollLeft + scrollX, document.body.scrollTop + scrollY); this.movedSinceScrolled = false; } // if we still have an active drag but the mouse hasn''t moved since we started // scrolling, keep scrolling until they move it again if (this.active && ! this.movedSinceScrolled) { setTimeout(this.scrollIntoView.bind(this), 200); } }, update: function(event) { if (this.active) { this.movedSinceScrolled = true; } this.oldUpdate(event); } }); -- ___________________________________________________ Play 100s of games for FREE! http://games.mail.com/ _______________________________________________ Rails-spinoffs mailing list Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
I cracked the Mozilla issue and I got it working on Safari as well. It''s still choppy, but functional and won''t auto-add scrollbars. Once I get it to scroll more smoothly I''ll submit the code again. Thomas still hasn''t said whether he''ll want to include it in the source or not, but even if he doesn''t, we can provide it as an add-on for people who want it. It''s been a pretty fun little project, and quite educational. Later, Greg -----Original Message----- From: rails-spinoffs-bounces-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org [mailto:rails-spinoffs-bounces-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org] On Behalf Of Gregory Hill Sent: Thursday, November 10, 2005 8:32 AM To: rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org Subject: RE: [Rails-spinoffs] Drag & Scroll Oh, I thought the auto-adding of scrollbars was desired. That''s how that original one you sent me works. That''s what I''ve been racking my brain to fix in IE. Anyway, I doubt we can get around it in Mozilla-based browsers, but I can keep trying. I suppose if we can crack it, we should make it optional; maybe sometimes it is desirable and other times not. I''ll try to work on making it less jumpy. What I sent yesterday was obviously pretty rough draft at this point. Thanks for the feedback. Greg -----Original Message----- From: rails-spinoffs-bounces-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org [mailto:rails-spinoffs-bounces-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org] On Behalf Of James Peters Sent: Wednesday, November 09, 2005 5:22 PM To: rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org Subject: RE: [Rails-spinoffs] Drag & Scroll Yeah it lets me drag both horizontally & vertically, but only if there is room to scroll (as it should). So if there is no horizontal scrollbar, it won''t scroll horizontally - unlike your solution at the moment. Here is the javascript - I hope it''s all self-contained: http://demo.plainblack.com/extras/draggable.js It looks like your solution is a great start, but it''s pretty jumpy and seems to keep scrolling even when there''s no more room to scroll, but that might be a problem with scriptaculous/prototype since (in Firefox not IE) when I drag my DIV either to the right (off the page) or down (off the page), it turns on the scrollbars and increases the scrollable area automatically. Not sure how easy that is to fix. James
Sounds good Greg. I don''t see why it shouldn''t be included as part of Scriptaculous - it seems like a very standard feature. There could be an option for Draggables to turn it on, so that it doesn''t affect existing scripts. Plus, having a choice is always a good thing. James ----- Original Message ----- I cracked the Mozilla issue and I got it working on Safari as well. It''s still choppy, but functional and won''t auto-add scrollbars. Once I get it to scroll more smoothly I''ll submit the code again. Thomas still hasn''t said whether he''ll want to include it in the source or not, but even if he doesn''t, we can provide it as an add-on for people who want it. It''s been a pretty fun little project, and quite educational. Later, Greg -- ___________________________________________________ Play 100s of games for FREE! http://games.mail.com/
Ok, here''s the best working version I can come up with. There''s still a little bit of choppiness, especially in Opera and Safari. Mozilla is pretty smooth, at least on my computer. Someone who knows the draggable code might know better how to smooth out the jerkiness; I dunno. It would be awesome if Thomas could include this in the scriptaculous library, but I imagine he won''t want to add something tested so little just before a major release. I was able to get this working on IE 5.5 & 6.0, Firefox 1.0.7, Safari 1.3, and Opera 8.5. Scrolling up and left is jerkier than down and right on all of them, and sometimes it renders the dragging element in the middle of the page instead of where the cursor is (it flickers back and forth). Not sure how to correct that. So, here''s the code, hopefully someone a little more intimately familiar with scriptaculous can work out the kinks and get it included. Thanks, Greg Object.extend(Draggable.prototype, { oldDraw: Draggable.prototype.draw, draw: function(event) { this.oldDraw(event); this.scrollIntoView(); }, scrollIntoView: function() { // set up to do 4px jumps every 100ms - might need adjusting this.scrollBy = 4; this.scrollTimeout = 100; var offsets = Position.cumulativeOffset(this.element); var x = offsets[0]; var y = offsets[1]; var scrollX = 0; var scrollY = 0; if (x < document.body.scrollLeft + this.scrollBy || y < document.body.scrollTop + this.scrollBy) { if (x < document.body.scrollLeft + this.scrollBy && x > (this.scrollBy - 1)) { scrollX = -this.scrollBy; } if (y < document.body.scrollTop + this.scrollBy && y > (this.scrollBy - 1)) { scrollY = -this.scrollBy; } } else { var elDimensions = Element.getDimensions(this.element); if (! (this.winDimensions && this.maxDimensions)) { Event.observe(window, ''resize'', function () { this.winDimensions = null; this.maxDimensions = null; }.bindAsEventListener(this)); this.winDimensions = Element.getDimensions(document.body); // to prevent Mozilla from extending the scrollbars indefinitely this.maxDimensions = (window.scrollMaxX != null && window.scrollMaxY != null) ? { width: this.winDimensions.width + window.scrollMaxX, height: this.winDimensions.height + window.scrollMaxY } : { width: 1000000, height: 1000000 }; } if ( x + elDimensions.width > document.body.scrollLeft + this.winDimensions.width - this.scrollBy && x + elDimensions.width + this.scrollBy <this.maxDimensions.width) { scrollX = this.scrollBy; } if ( y + elDimensions.height > document.body.scrollTop + this.winDimensions.height - this.scrollBy && y + elDimensions.height + this.scrollBy <this.maxDimensions.height) { scrollY = this.scrollBy; } } if (scrollX != 0 || scrollY != 0) { var oldScroll = [document.body.scrollLeft, document.body.scrollTop]; window.scrollTo(document.body.scrollLeft + scrollX, document.body.scrollTop + scrollY); // if scrolling had no effect, then we''re at the edge (fix for Opera) if (scrollX != 0 && document.body.scrollLeft == oldScroll[0] && this.maxDimensions.width == 1000000) { this.maxDimensions.width = document.body.scrollLeft + this.winDimensions.width; } else if (scrollX != 0) { var currX = parseInt(this.element.style.left.replace(/px/,'''')); this.element.style.left = (currX + scrollX > 0) ? (currX + scrollX) + ''px'' : ''0px''; } if (scrollY != 0 && document.body.scrollTop == oldScroll[1] && this.maxDimensions.height == 1000000) { this.maxDimensions.height = document.body.scrollTop + this.winDimensions.height; } else if (scrollY != 0) { var currY = parseInt(this.element.style.top.replace(/px/,'''')); this.element.style.top = (currY + scrollY > 0) ? (currY + scrollY) + ''px'' : ''0px''; } this.movedSinceScrolled = false; } // if we still have an active drag but the mouse hasn''t moved since we started // scrolling, keep scrolling until they move it again if (this.active && ! this.movedSinceScrolled) { setTimeout(this.scrollIntoView.bind(this), this.scrollTimeout); } }, oldUpdate: Draggable.prototype.update, update: function(event) { if (this.active) { this.movedSinceScrolled = true; } this.oldUpdate(event); } });
Thank-you for sharing this - I found it very useful. I was just about to code up a JS function to sum the el.offsetX. I would like to see this functionality in scriptaculus - I hope others agree (for now I''ll just extend my version). BTW - When posting new messages in the future, don''t reply to an existing topic/thread. Always create a new message s.t. threaded readers present your message properly (I almost missed your post b/c it was embedded into the "Drag & Scroll" thread). Thanks again! On 10-Nov-05, at 3:40 AM, Michael Krog wrote:> I''m sorry! > This mail is really not about script.aculo.us and prototype - its > about some things i often need when using script.aculo.us and > prototype. > (Chances are some these functions already are available, but I > missed them) > > It be getting/setting size and actual position of: > - Elements > - Window > - Screen > > I have tried to implement it in prototype-style, and for those > interested, the code is in the end of this mail. For those thinking > "What > a jerk", PLEASE delete this mail now as I know it really does''nt > belong here. > > Never the less, I feel good about sharing this code to you guys! :-) > > It consists of 3 ''namespaces'': Geometry, System and Element(extends > the original Element ''namespace''). > Short API-description: > Geometry.Size(width,height) //Usage: var size=new Geometry.Size > (200,300); alert("Size is: "+size.width+"x"+size.height); > Geometry.Position(x,y); //Usage: var pos=new > Geometry.Position(20,30);alert("Pos. is: "+pos.x+"x"+pos.y); > > Element.getPosition(element); //Usage: var pos=Element.getPosition > ("myelement");alert("Pos. is: "+pos.x+"x"+pos.y); > Element.setPosition(element,pos); //Usage: var pos=new > Geometry.Position(20,30);Element.setPosition("myelement",pos); > Element.getSize(element); //Usage: var size=Element.getSize > ("myelement"); alert("Size is: "+size.width+"x"+size.height); > Element.setSize(element,size); //Usage: var size=new Geometry.Size > (200,300); Element.setSize("myelement",size); > > System.getWindowSize(); //Usage: var size=System.getWindowSize > (); alert("Size is: "+size.width+"x"+size.height); > System.setWindowSize(size); //Usage: var size=new Geometry.Size > (200,300); System.setWindowSize(size); > System.getWindowPosition(); //Usage: var > pos=System.getWindowPosition();alert("Pos. is: "+pos.x+"x"+pos.y); > System.setWindowPosition(pos);//Usage: var pos=new Geometry.Position > (200,200); System.setWindowPosition(pos); > System.getScreenSize(availSpaceOnly); //Usage: var > size=System.getScreenSize(true); alert("Size is: "+size.width > +"x"+size.height); > > Best Regards > Michael Krog > > > /***************************************************** > * Geometric classes > *****************************************************/ > var Geometry = { > Size:function(width,height){ > this.width=width; > this.height=height; > this.toString=function(){return this.width+"x"+this.height;} > }, > > Position:function(x,y){ > this.x=x; > this.y=y; > this.toString=function(){return this.x+"x"+this.y;} > } > } > > /****************************************************** > * Geometric functions > ******************************************************/ > > Object.extend(Element, { > getPosition: function(element) { > element=$(element); > var left=element.offsetLeft,top=element.offsetTop; > while (element.offsetParent.tagName != "BODY") { > element = element.offsetParent; > left += element.offsetLeft; > top += element.offsetTop; > } > return new Geometry.Position(left,top); > }, > setPosition:function(element,pos){ > element=$(element); > element.style.left=pos.x; > element.style.top=pos.y; > }, > getSize:function(element){ > element=$(element); > var width,height; > if(element.style.display=="none"){ > var visibility=element.style.visibility; > element.style.visibility="hidden"; > element.style.display=""; > width=element.offsetWidth; > height=element.offsetHeight; > element.style.display="none"; > element.style.visibility=visibility; > } > else{ > width=element.offsetWidth; > height=element.offsetHeight; > } > return new Geometry.Size(width,height); > }, > setSize:function(element,size){ > element=$(element); > element.style.width=size.width; > element.style.height=size.height; > } > }) > > > > var System={ > getWindowSize:function(){ > if (navigator.appName=="Netscape") { > return new Geometry.Size > (window.innerWidth,window.innerHeight); > } > if (navigator.appName.indexOf("Microsoft")!=-1) { > return new Geometry.Size > (document.body.offsetWidth,document.body.offsetHeight); > } > }, > getScreenSize:function(availableSpaceOnly){ > if(availableSpaceOnly) > return new Geometry.Size > (screen.availWidth,screen.availHeight); > else > return new Geometry.Size(screen.width,screen.height); > }, > setWindowSize:function(size){ > if (parseInt(navigator.appVersion)>3) { > if (navigator.appName=="Netscape") { > top.outerWidth=size.width; > top.outerHeight=size.height; > } > else top.resizeTo(size.width,size.height); > } > }, > setWindowPosition:function(pos){ > top.window.moveTo(pos.x,pos.y); > }, > getWindowPosition:function(){ > if(document.all){ //IE > return new Geometry.Position > (window.screenLeft,window.screenTop); > } > else{ > return new Geometry.Position > (window.screenX,window.screenY); > } > } > } > > _______________________________________________ > 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
Thanks Greg. I know at least I''ll be using this. It''s not perfect, but it does allow you to move stuff to other areas off-screen fairly conveniently. Thanks, James ----- Original Message ----- Ok, here''s the best working version I can come up with. There''s still a little bit of choppiness, especially in Opera and Safari. Mozilla is pretty smooth, at least on my computer. Someone who knows the draggable code might know better how to smooth out the jerkiness; I dunno. It would be awesome if Thomas could include this in the scriptaculous library, but I imagine he won''t want to add something tested so little just before a major release. I was able to get this working on IE 5.5 & 6.0, Firefox 1.0.7, Safari 1.3, and Opera 8.5. Scrolling up and left is jerkier than down and right on all of them, and sometimes it renders the dragging element in the middle of the page instead of where the cursor is (it flickers back and forth). Not sure how to correct that. So, here''s the code, hopefully someone a little more intimately familiar with scriptaculous can work out the kinks and get it included. Thanks, Greg -- ___________________________________________________ Play 100s of games for FREE! http://games.mail.com/
Thanks for this, i''ll definitely want to include it! What I want to see too is support for scrolling containers that have overflow:auto/scroll set. Could this be added? It should probably search for first parent that has overflow:auto set, if none is found, scroll the page. Maybe there should be some options to better control this, like a scroll: option that take an element (and defaults to body). if you set scroll:false then no scrolling takes place. What do you think? Cheers, Thomas Am 10.11.2005 um 22:27 schrieb Gregory Hill:> Ok, here''s the best working version I can come up with. There''s > still a > little bit of choppiness, especially in Opera and Safari. Mozilla is > pretty smooth, at least on my computer. Someone who knows the > draggable > code might know better how to smooth out the jerkiness; I dunno. It > would be awesome if Thomas could include this in the scriptaculous > library, but I imagine he won''t want to add something tested so little > just before a major release. I was able to get this working on IE > 5.5 & > 6.0, Firefox 1.0.7, Safari 1.3, and Opera 8.5. Scrolling up and > left is > jerkier than down and right on all of them, and sometimes it > renders the > dragging element in the middle of the page instead of where the cursor > is (it flickers back and forth). Not sure how to correct that. So, > here''s the code, hopefully someone a little more intimately familiar > with scriptaculous can work out the kinks and get it included. > > Thanks, > Greg
Ooh, that''s a good idea about the parent element; I''ll have to see what''s possible there. We could provide the option to turn off scrolling or specify which element to scroll, but by default I think it should do the nearest parent element that is scrollable. That seems the most intuitive to me. I''ll see what I can do. Greg -----Original Message----- From: rails-spinoffs-bounces-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org [mailto:rails-spinoffs-bounces-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org] On Behalf Of Thomas Fuchs Sent: Friday, November 11, 2005 2:49 AM To: rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org Subject: Re: [Rails-spinoffs] Drag & Scroll Thanks for this, i''ll definitely want to include it! What I want to see too is support for scrolling containers that have overflow:auto/scroll set. Could this be added? It should probably search for first parent that has overflow:auto set, if none is found, scroll the page. Maybe there should be some options to better control this, like a scroll: option that take an element (and defaults to body). if you set scroll:false then no scrolling takes place. What do you think? Cheers, Thomas Am 10.11.2005 um 22:27 schrieb Gregory Hill:> Ok, here''s the best working version I can come up with. There''s > still a > little bit of choppiness, especially in Opera and Safari. Mozilla is > pretty smooth, at least on my computer. Someone who knows the > draggable > code might know better how to smooth out the jerkiness; I dunno. It > would be awesome if Thomas could include this in the scriptaculous > library, but I imagine he won''t want to add something tested so little > just before a major release. I was able to get this working on IE > 5.5 & > 6.0, Firefox 1.0.7, Safari 1.3, and Opera 8.5. Scrolling up and > left is > jerkier than down and right on all of them, and sometimes it > renders the > dragging element in the middle of the page instead of where the cursor > is (it flickers back and forth). Not sure how to correct that. So, > here''s the code, hopefully someone a little more intimately familiar > with scriptaculous can work out the kinks and get it included. > > Thanks, > Greg_______________________________________________ Rails-spinoffs mailing list Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
About scrolling overflow:auto divs: I want to use an overflow:auto div for keeping a list of draggables in a scrollable list. I would like to dragg these draggables to dropables outside the auto div. But when I want to dragg an item out, the draggable just disappears behind the div border. Maybe someone has an idea how I can get the draggables out of the div? Martin __________________________________________________________________________ Erweitern Sie FreeMail zu einem noch leistungsstärkeren E-Mail-Postfach! Mehr Infos unter http://freemail.web.de/home/landingpad/?mc=021131
I solved that one myself set option bringtofront to true. When draggable is dragged, it gets detached from its parent node and attached to the body node. On end of revert, it gets reattached. Works only with ghosting and revert=on, because that is all i need at the moment. Diff Patch for dragdrop.js: 128c128 < reverteffect: (function(element, top_offset, left_offset) { ---> reverteffect: function(element, top_offset, left_offset) {130,157c130,131 < new Effect.MoveBy(element, -top_offset, -left_offset, < {duration:dur, < afterFinish:(function(){ < < if(this.onFront) { < this.onFront=false; < < this.element.style.left=this._clone.offsetLeft+"px"; < this.element.style.top=this._clone.offsetTop+"px"; < this._clone.parentNode.insertBefore(this.element,this._clone); < Position.relativize(this.element); < < if(this.options.ghosting) { < < Element.remove(this._clone); < this._clone = null; < } < < } < < }).bind(this) < }); < < < < < < }).bind(this), ---> new Effect.MoveBy(element, -top_offset, -left_offset, {duration:dur}); > },217,218c191 < if( this.onFront) < return; --->226c199 < --->241,245c214,216 < < < < if(this.options.ghosting && !this.options.bringtofront) { < //Position.relativize(this.element); ---> > if(this.options.ghosting) { > Position.relativize(this.element);249,250d219 < < 318c287 < if(this.options.ghosting && !this.onFront) { ---> if(this.options.ghosting) {323,331c292 < if(this.options.bringtofront && !this.onFront) { < this.onFront=true; < pos=Position.page(this.element); < this.originalLeft = pos[0]; < this.originalTop = pos[1]; < this.originalZ=1000; < document.body.appendChild(this.element); < < } --->______________________________________________________________ Verschicken Sie romantische, coole und witzige Bilder per SMS! Jetzt bei WEB.DE FreeMail: http://f.web.de/?mc=021193