Created
December 1, 2014 16:48
-
-
Save illustratordavid/5c80da9f1c3da028e70a to your computer and use it in GitHub Desktop.
snap svg drag relative to mouse and object // source http://jsbin.com/cisasu
This file contains hidden or 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> | |
| <html> | |
| <head> | |
| <meta charset=utf-8 /> | |
| <title>JS Bin</title> | |
| <script src="http://snapsvg.io/assets/js/snap.svg-min.js"></script> | |
| <script src="http://snapsvg.io/assets/js/prism.js"></script> | |
| </head> | |
| <body> | |
| <div id="svg" width="400" height="400"></div> | |
| <script id="jsbin-javascript"> | |
| var s = Snap(400,400); | |
| var bigCircle = s.circle(100, 100, 100); | |
| var smallSquare = s.rect(20,20,150,150).attr({fill:"#ff6600"}); | |
| var startx, starty; | |
| var moveFunc = function (dx, dy, posx, posy) { | |
| this.attr( { x: startx - (0 - dx), | |
| y: starty - (0 - dy) }); | |
| }; | |
| smallSquare.drag( moveFunc, | |
| function(){ | |
| startx = this.attr('x'); | |
| starty = this.attr('y'); | |
| console.log("Move started"); | |
| }, | |
| function(){ | |
| console.log("Move stopped"); | |
| } | |
| ); | |
| </script> | |
| <script id="jsbin-source-javascript" type="text/javascript">var s = Snap(400,400); | |
| var bigCircle = s.circle(100, 100, 100); | |
| var smallSquare = s.rect(20,20,150,150).attr({fill:"#ff6600"}); | |
| var startx, starty; | |
| var moveFunc = function (dx, dy, posx, posy) { | |
| this.attr( { x: startx - (0 - dx), | |
| y: starty - (0 - dy) }); | |
| }; | |
| smallSquare.drag( moveFunc, | |
| function(){ | |
| startx = this.attr('x'); | |
| starty = this.attr('y'); | |
| console.log("Move started"); | |
| }, | |
| function(){ | |
| console.log("Move stopped"); | |
| } | |
| ); | |
| </script></body> | |
| </html> |
This file contains hidden or 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
| var s = Snap(400,400); | |
| var bigCircle = s.circle(100, 100, 100); | |
| var smallSquare = s.rect(20,20,150,150).attr({fill:"#ff6600"}); | |
| var startx, starty; | |
| var moveFunc = function (dx, dy, posx, posy) { | |
| this.attr( { x: startx - (0 - dx), | |
| y: starty - (0 - dy) }); | |
| }; | |
| smallSquare.drag( moveFunc, | |
| function(){ | |
| startx = this.attr('x'); | |
| starty = this.attr('y'); | |
| console.log("Move started"); | |
| }, | |
| function(){ | |
| console.log("Move stopped"); | |
| } | |
| ); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment