Rotating blocks in JavaScript.

Question

I'd like to create a JavaScript web app that makes blocks appear on the page that can be dragged around by the user. If I used DIVs with background colors, it would be easy to rotate them by 90 degrees at a time.

However, if I wanted to rotate them arbitrarily, how could I accomplish this? I'd rather not have to resort to Flash, images, Java applets or HTML5. (I'd like it to be a plain DHTML app, maybe with a cgi script on the backend, but limit the number of plugins I need.)

(EDIT: The draggable DIVs isn't the hard part, I have that down. It's the rotating that I'd like ideas on.)

Answer 1

you can use jquery UI to have draggable blocks.

check this out.

Answer 2

Dragging is easy. See Catfish's answer.

But rotation? If you'd rather not resort to any of those techniques, then you pretty much can't do it. Sorry.

WebKit (Safari, Chrome) and Mozilla (Firefox) implement the best solution: CSS declarations. I assume one could manipulate them through Javascript, like everything else.

-webkit-transform: rotate(-15deg);
-moz-transform: rotate(-15deg);

However, given all the different restrictions you list (HTML5, mainly), it sounds like you're looking for something that will work every browser, so this solution is out. You could pull it off in <canvas>, though it's also not globally compatible, it'd be a pain, and I'd probably qualify that as HTML5, anyway.

So, no go. You pretty much list every technology that would make this possible as not being an option. Either no cross-browser compatibility, or use a plugin.

The new web is coming. Things will be better. For now, deal with it.

Answer 3

Hey dude. Unfortunately, I've never seen or done this with javascript and I say with a little trepidation it may not be possible using true javascript.

There is a way to do with with CSS(3), but it differs slightly from browser to browser.

-moz-transform: rotate(-45deg);

and / or

-webkit-transform: rotate(90deg);

Dragging is pretty simple, difficult to build from scratch but simply googling will come up trumps.

If your using something like jQuery or Prototype, both these should be easy enough to plugin.

Hope it helps.

Answer 4

Catfish's answer for dragging around the boxes is good and useful, but the rotation will be more of a pain.

Take a look at the example here at css3please.com, it shows a cross browser compatible way to do things.

Looks like a promising project!