Rotating blocks in JavaScript
I would like to create a JavaScript web application that will make the blocks appear on the page that can be moved by the user. If I were to use DIVs with background colors, it would be easy to rotate them 90 degrees at a time.
However, if I wanted to rotate them arbitrarily, how could I do it? I would rather not resort to Flash, images, Java applets, or HTML5. (I'd like this to be a simple DHTML application, perhaps with a cgi script on the server, but limit the number of plugins I need.)
(EDIT: Dragging DIVs is not the tricky part, I have this. This is a rotation I would like to get my head around.)
a source to share
Drag and drop is easy. See Soma's answer.
But rotation? If you choose not to resort to any of these methods, then you pretty much cannot do it. Unfortunately.
WebKit (Safari, Chrome) and Mozilla (Firefox) both implement the best solution: CSS declarations. I guess it is possible to manipulate them through Javascript like everything else.
-webkit-transform: rotate(-15deg);
-moz-transform: rotate(-15deg);
However, given all the various limitations you list (mostly HTML5), it looks like you are looking for something that will work in every browser, so this solution is missing. You can turn it off in <canvas>
, although it is also not globally compatible, it would be a pain and I would probably qualify it as HTML5.
So don't go. You are pretty much listing every technology that would make this possible, since that is not an option. Browser-free compatibility or plugin use.
A new website will appear. Everything will be better. For now, we'll deal with this.
a source to share
Hey dude. Unfortunately, I've never seen or done this with javascript, and I say with a little awe that this might not be possible using true javascript.
There is a way to do this using CSS (3), but it differs slightly from browser to browser.
-moz-transform: rotate(-45deg);
and / or
-webkit-transform: rotate(90deg);
The drag and drop is pretty simple, tricky to build from scratch, but just googling will come up with trump cards.
If you're using something like jQuery or Prototype, both should be light enough for the plugin.
Hope it helps.
a source to share
Catfish's answer for dragging boxes is good and helpful , but rotating will be more painful.
Take a look at the example here at css3please.com , it shows a cross-browser compatible way of doing things.
Looks like a promising project!
a source to share