Skip to content

Instantly share code, notes, and snippets.

@nathanhammond
Created January 4, 2012 07:15
Show Gist options
  • Save nathanhammond/1558920 to your computer and use it in GitHub Desktop.
Save nathanhammond/1558920 to your computer and use it in GitHub Desktop.
Simplified testcase for jQuery UI Draggable bugs.
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<style type="text/css">
html { overflow-y: scroll; }
.tile td { width: 20px; height: 20px; }
.tile td.full { background: red;}
.board { width: 800px; height: 800px; background: black; }
</style>
</head>
<body>
<div id="players">
<div class="tile"><table cellpadding="0"><tbody><tr><td class="full"></td><td class="full"></td><td class="full"></td></tr><tr><td class="full"></td><td class="empty"></td><td class="empty"></td></tr><tr><td class="full"></td><td class="empty"></td><td class="empty"></td></tr></tbody></table></div>
<div class="tile"><table cellpadding="0"><tbody><tr><td class="full"></td><td class="full"></td><td class="full"></td></tr><tr><td class="empty"></td><td class="full"></td><td class="empty"></td></tr></tbody></table></div>
<div class="tile"><table cellpadding="0"><tbody><tr><td class="full"></td><td class="full"></td></tr><tr><td class="empty"></td><td class="full"></td></tr></tbody></table></div>
<div class="tile"><table cellpadding="0"><tbody><tr><td class="full"></td><td class="full"></td></tr></tbody></table></div>
<div class="tile"><table cellpadding="0"><tbody><tr><td class="full"></td><td class="full"></td><td class="full"></td></tr></tbody></table></div>
<div class="tile"><table cellpadding="0"><tbody><tr><td class="full"></td><td class="full"></td><td class="full"></td><td class="full"></td></tr></tbody></table></div>
<div class="tile"><table cellpadding="0"><tbody><tr><td class="full"></td><td class="full"></td><td class="full"></td></tr><tr><td class="full"></td><td class="empty"></td><td class="empty"></td></tr><tr><td class="full"></td><td class="empty"></td><td class="empty"></td></tr></tbody></table></div>
<div class="tile"><table cellpadding="0"><tbody><tr><td class="full"></td><td class="full"></td><td class="full"></td></tr><tr><td class="empty"></td><td class="full"></td><td class="empty"></td></tr></tbody></table></div>
<div class="tile"><table cellpadding="0"><tbody><tr><td class="full"></td><td class="full"></td></tr><tr><td class="full"></td><td class="empty"></td></tr></tbody></table></div>
<div class="tile"><table cellpadding="0"><tbody><tr><td class="full"></td><td class="full"></td></tr></tbody></table></div>
</div>
<div class="board"></div>
<script src="http://code.jquery.com/jquery-git.js"></script>
<script src="http://code.jquery.com/ui/jquery-ui-git.js"></script>
<script>
$('.tile').draggable();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment