SO fiddle

Test Fiddle mainly for SO Questions

by powerMugen

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 class="onepx">01</div>
        <div class="onepx">02</div>
        <div class="onepx">03</div>
    </div>
    <ul id="node-grid"></ul>
</div>

CSS

* { font-family: arial; font-size: 11px; margin: 0; padding: 0; }
div#create-container { width: 900px; height: 580px; min-height: 500px; background-color: #666; margin: 0 auto; }
div#create-sections { width: 140px; height: 580px; min-height: 500px; background-color: #555; float: left; }
div#create-sections .onepx {float:left;}
ul#node-grid { width: 580px; height: 580px; min-height: 580px; 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: 140px; height: 140px; min-height: 20px; background-color: #000; float: left; }
li.grid-node:nth-child(29n+1) {background:none;}
li.grid-node:nth-child(-n+29) {background:none;}

JavaScript

function addSections() {
    var numParts = 29;

    var addItems = numParts;
    var addMoreItems = numParts*29;
    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({ 
    drag:function(event,ui){
        $(ui.draggable).css({"position":"absolute"});
    },
    snap: '.grid-node', snapMode: 'outer', snapTolerance: 20, containment: '#node-grid', opacity: 0.5 });