SO fiddle

Test Fiddle mainly for SO Questions

by Nick Craver

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/dot-luv/jquery-ui.css">
<div id="create-container">
    <div id="create-sections"></div>
    <ul id="node-grid"></ul>
</div>

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: 60px; height: 460px; min-height: 460px; background-color: #555; float: left; padding: 40px 0 0 40px; }
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; }

JavaScript

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 });