move element horyziontally and vertically jquery ui

this is my example whit 3 element that I move only horizontally. I need to move my element horizontally and vertically. For example if I have 3 rows and 3 colums I need to move my element under this rows and columns.. Help please..

HTML

<ul id="sortable">
    <li class="ui-state-default" name="a" title="aaaa" ><div id="bbb" title="aaa">Item 1</div></li>
    <li class="ui-state-default" id="b"><div id="bbb" title="aaa">Item 2</div></li>
    <li class="ui-state-default" id="c">Item 3</li>
    <li class="ui-state-default" id="d">Item 4</li>
    <li class="ui-state-default" id="e">Item 5</li>
</ul>

JavaScript

$(function() {
    $("#sortable").sortable({
        revert: true,
    });

    $("#draggable").draggable({
        connectToSortable: "#sortable",
        helper: "clone",
        revert: "invalid"
    });

    $("ul, li").disableSelection();
});

I think this question covers some answers to what you are asking:

• Control draggable movement in jQuery

Basically it seems you use either the snap mode or grid mode.