Skip to content

Instantly share code, notes, and snippets.

@roseforyou

roseforyou/jsbin.iDIXObE.css

Created December 18, 2013 13:23
Show Gist options
  • Save roseforyou/8022270 to your computer and use it in GitHub Desktop.
Save roseforyou/8022270 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
jsbin.iDIXObE.css
body {
padding:0;
margin:0;
}
#block {
width:50px;
height:50px;
background-color:red;
position:absolute;
top: 100px;
left:100px;
}
Raw
jsbin.iDIXObE.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/smoothness/jquery-ui.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<meta charset=utf-8 />
<title>Welcome to JS Bin</title>
</head>
<body>
<div id="block"></div>
<script>
var ele = $('#block');
// Create handle dynamically
$('<div></div>').appendTo(ele).attr('id','handle').css({
'position': 'absolute',
'bottom': 5,
'right': 5,
'height': 10,
'width': 10,
'background-color': 'orange'
});
ele.css('position', 'relative');
$('#handle').draggable({
handle: '#handle',
opacity: 0.01,
helper: 'clone',
drag: function(event, ui){
var rotateCSS = 'rotate(' + ui.position.top + 'deg)';
$(this).parent().css({
'-moz-transform': rotateCSS,
'-webkit-transform': rotateCSS
});
}
});
</script>
<!--
</body>
</html>-->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment