Page 1 of 1

Click and drag scrolling in a web app?

Posted: Tue Jan 21, 2014 4:23 pm UTC
by Spambot5546
I'm trying to make a control that will contain a checkerboard style grid. This grid could, potentially, be larger than what the user will see at a given time so I want them to have the option of scrolling. Since scrollbars are a pain in the ass I'm hoping to do click-and-drag scrolling but I'm not sure how, or if it's even possible.

I'm kind of flexible with what language to do this in, it just needs to be accessible in a browser and capable of constant interaction with the server (perferrably through a web service a-la SOAP). I would prefer Java, that's where most of my experience lies.

Re: Click and drag scrolling in a web app?

Posted: Tue Jan 21, 2014 4:45 pm UTC
by Xanthir
Scrolling is purely client-side, so your only choice of langauge to use for it is JavaScript.

You can do click-to-drag without too much difficulty by listening for the mousedown/mouseup events (to tell when they have the mouse button depressed) and the mousemove events. Just record the cursor's current position in mousedown, figure deltas on mousemove and adjust the checkerboard background (use an overflow:hidden div with a background image on it, and adjust the scrollLeft/scrollTop properties to move it around), and stop listening to mousemoves when the mouseup event happens.

This should be enough information and googleable keywords to get you tutorials for everything you need. Just remember the cardinal rule of web tutorials: never click on a W3Schools link.

Re: Click and drag scrolling in a web app?

Posted: Tue Jan 21, 2014 4:55 pm UTC
by Spambot5546
I was hoping to avoid working directly with HTML/JS. I've been working in VAADIN and Flex a lot lately, and was planning on continuing in that vein. That said, I may not have a choice.

Re: Click and drag scrolling in a web app?

Posted: Wed Jan 22, 2014 4:54 pm UTC
by Xanthir
The browser doesn't run Java, it runs JS. There are some compile-to-JS languages, some of which are even Java (Google has developed several, for example, because a decent chunk of its engineers are afraid of JS), but you'll be best served by just buckling down and learning some basic stuff.

Re: Click and drag scrolling in a web app?

Posted: Fri Jan 24, 2014 1:43 am UTC
by Steax
I've used this script as a relatively drop-in solution for click-and-drag scrolling.