Skip to content

Instantly share code, notes, and snippets.

@danjordan

danjordan/roundabout.html

Created February 20, 2012 16:08
Show Gist options
  • Save danjordan/1869930 to your computer and use it in GitHub Desktop.
Save danjordan/1869930 to your computer and use it in GitHub Desktop.
Download ZIP
Drag and drop with waterwheel shape only responds to horizontal dragging
Raw
roundabout.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://raw.github.com/fredhq/roundabout/master/jquery.roundabout.min.js"></script>
<script src="https://raw.github.com/fredhq/roundabout-shapes/master/jquery.roundabout-shapes.min.js"></script>
<script src="http://threedubmedia.googlecode.com/files/jquery.event.drag-2.0.min.js"></script>
<script src="http://threedubmedia.googlecode.com/files/jquery.event.drop-2.0.min.js"></script>
<script>
$(function() {
$('ul').roundabout({
enableDrag: true,
//shape: 'waterWheel'
});
});
</script>
<style>
.roundabout-holder {
list-style:none;
padding:0;
margin:0 auto;
height:500px;
width:500px;
}
.roundabout-moveable-item {
height:300px;
width:300px;
cursor:pointer;
background: #ccc;
border:1px solid #999;
}
.roundabout-in-focus {
cursor: auto;
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment