When I grab my draggable(s), they seem to snap incorrectly to the grid on the right - this has me confused!
Any idea how I can drag an element and have it snap closer to my cursor??
code:
<html>
<head>
<title></title>
<script type="text/javascript" language="javascript" src="sys/jquery-1.4.2.js"></script>
<script type="text/javascript" language="javascript" src="sys/jquery-ui-1.8.4.min.js"></script>
<style type="text/css">
* { font-family: arial; font-size: 11px; margin: 0; padding: 0; }
div#create-container { width: 900px; height: 500px; min-height: 500px; background-color: #666; margin: 0 auto; }
div#create-sections { width: 100px; height: 500px; min-height: 500px; background-color: #555; float: left; }
ul#node-grid { width: 200px; height: 200px; min-height: 200px; background-color: #777; float: right; }
li.grid-node { width: 20px; height: 20px; min-height: 20px; background-color: darkred; display: block; float: left; list-style-type: none; }
div.onepx { width: 20px; height: 20px; min-height: 20px; background-color: #000; position: absolute; float: left; margin-left: 40px; margin-top: 40px; }
</style>
<script type="text/javascript">
$(document).ready(function() {
//add sections to page
function addSections() {
var numParts = 10;
var addItems = numParts;
var addMoreItems = numParts*10;
while (addItems >= 0) {
$('div#create-sections').append('<div class="onepx"></div>');
addItems--;
}
while (addMoreItems > 0) {
$('ul#node-grid').append('<li class="grid-node"></li>');
addMoreItems--;
}
}
// init
addSections();
$(".onepx").draggable({ snap: '.grid-node', snapMode: 'inner', snapTolerance: 20, containment: '#create-container', opacity: 0.5 });
});
</script>
</head>
<body>
<div id="create-container">
<div id="create-sections"></div>
<ul id="node-grid"></ul>
</div>
</body>
</html>