Demonstrating drag rotation of an element around its center point.
Created
October 29, 2013 00:06
-
-
Save joyrexus/7207044 to your computer and use it in GitHub Desktop.
Drag rotation of a div
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <style> | |
| body { | |
| display: flex; | |
| justify-content: center; | |
| } | |
| #target { | |
| margin-top: 100px; | |
| font-family: "Helvetica Neue", sans-serif; | |
| font-weight: 100; | |
| font-size: 150px; | |
| color: #777; | |
| -webkit-font-smoothing: antialiased; | |
| } | |
| #target:hover { | |
| color: orange; | |
| cursor: pointer; | |
| } | |
| </style> | |
| <body> | |
| <div id="target">ROTATE ME!</div> | |
| <script src="rotate.js"></script> | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| active = false # true if mouse is down | |
| angle = 0 # target's current angle of rotation | |
| rotation = 0 # amount of last rotation event | |
| startAngle = 0 # starting angle of rotation event | |
| center = # center point coords of target | |
| x: 0 | |
| y: 0 | |
| document.ontouchmove = (e) -> e.preventDefault() # prevent scrolling | |
| # Runs when the web page is first opened | |
| init = -> | |
| target.addEventListener("mousedown", start, false) | |
| target.addEventListener("mousemove", rotate, false) | |
| target.addEventListener("mouseup", stop, false) | |
| # Convert radians to degrees | |
| R2D = 180 / Math.PI | |
| # Set the starting angle of the touch relative to target's center | |
| start = (e) -> | |
| e.preventDefault() | |
| {top, left, height, width} = @getBoundingClientRect() | |
| center = | |
| x: left + (width/2) | |
| y: top + (height/2) | |
| x = e.clientX - center.x | |
| y = e.clientY - center.y | |
| startAngle = R2D * Math.atan2(y, x) | |
| active = true | |
| # Rotate target | |
| rotate = (e) -> | |
| e.preventDefault() | |
| x = e.clientX - center.x | |
| y = e.clientY - center.y | |
| d = R2D * Math.atan2(y, x) | |
| rotation = d - startAngle | |
| @style.webkitTransform = "rotate(#{angle + rotation}deg)" if active | |
| # Save the final angle of rotation | |
| stop = -> | |
| angle += rotation | |
| active = false | |
| init() |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Generated by CoffeeScript 1.6.3 | |
| (function() { | |
| var R2D, active, angle, center, init, rotate, rotation, start, startAngle, stop; | |
| active = false; | |
| angle = 0; | |
| rotation = 0; | |
| startAngle = 0; | |
| center = { | |
| x: 0, | |
| y: 0 | |
| }; | |
| document.ontouchmove = function(e) { | |
| return e.preventDefault(); | |
| }; | |
| init = function() { | |
| target.addEventListener("mousedown", start, false); | |
| target.addEventListener("mousemove", rotate, false); | |
| return target.addEventListener("mouseup", stop, false); | |
| }; | |
| R2D = 180 / Math.PI; | |
| start = function(e) { | |
| var height, left, top, width, x, y, _ref; | |
| e.preventDefault(); | |
| _ref = this.getBoundingClientRect(), top = _ref.top, left = _ref.left, height = _ref.height, width = _ref.width; | |
| center = { | |
| x: left + (width / 2), | |
| y: top + (height / 2) | |
| }; | |
| x = e.clientX - center.x; | |
| y = e.clientY - center.y; | |
| startAngle = R2D * Math.atan2(y, x); | |
| return active = true; | |
| }; | |
| rotate = function(e) { | |
| var d, x, y; | |
| e.preventDefault(); | |
| x = e.clientX - center.x; | |
| y = e.clientY - center.y; | |
| d = R2D * Math.atan2(y, x); | |
| rotation = d - startAngle; | |
| if (active) { | |
| return this.style.webkitTransform = "rotate(" + (angle + rotation) + "deg)"; | |
| } | |
| }; | |
| stop = function() { | |
| angle += rotation; | |
| return active = false; | |
| }; | |
| init(); | |
| }).call(this); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment