javascript - move element horyziontally and vertically jquery ui -

this example whit 3 element move horizontally. need move element horizontally , vertically. example if have 3 rows , 3 colums need move element under rows , columns.. 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 question covers answers asking:

• control draggable movement in jquery

basically seems use either snap mode or grid mode.