Determine current position of element positioned with jQuery Sortable plug-in -

i use jquery ui sortable plug-in move elements on page. elements divided 3 columns , 3 rows. when move object, want know position of element (first row-first column, first row third column, etc.).

here's example: jquery ui sortable plug-in

when move element, sortchange event fired. second parameter of event contains information element moved. property you're looking .offset, gives position of element moved. row, divide ui.position.top height of the element , add one. column, divide ui.position.left width of the element, , add one.

demo: http://jsfiddle.net/thinkingstiff/bfzsj/

script:

$( "#sortable" ).sortable();  $( '#sortable' ).bind( 'sortchange', function( event, ui ) {      var width = event.target.clientwidth,         height = event.target.clientheight,         top = this.offsettop,         left = this.offsetleft;      document.getelementbyid( 'position' ).textcontent =          ' row: ' + math.floor( ( math.abs( ui.offset.top + top ) / height ) + 1 )          + ' col: ' + math.floor( ( math.abs( ui.offset.left + left ) / width ) + 1 ) ;  } ); 

html:

<div id="position">row: n/a col: n/a</div> <ul id="sortable">     <li class="ui-state-default">1</li><!--     --><li class="ui-state-default">2</li><!--     --><li class="ui-state-default">3</li><!--     --><li class="ui-state-default">4</li><!--     --><li class="ui-state-default">5</li><!--     --><li class="ui-state-default">6</li><!--     --><li class="ui-state-default">7</li><!--     --><li class="ui-state-default">8</li><!--     --><li class="ui-state-default">9</li> </ul> 

css:

#sortable {      list-style-type: none;      margin: 0;      padding: 0;     position: relative;     width: 325px; }  #sortable li {      display: inline-block;     font-size: 4em;     height: 100px;      position: relative;     text-align: center;      vertical-align: top;     width: 100px;  } 

output: