确定使用jQuery Sortable插件定位的元素的当前位置

Question

我使用jQuery UI Sortable插件在我的页面上移动元素。我的元素分为三列和三行。移动对象时，我想知道元素的位置（第一行第一列，第一行第三列等）。

以下是一个示例：jQuery UI Sortable plug-in

Answer 1

移动元素时，会触发sortchange事件。此事件的第二个参数包含有关已移动元素的信息。您正在寻找的属性是.offset，它为您提供刚刚移动的元素的位置。要获取该行，请将ui.position.top除以该元素的height并添加一行。要获取列，请将ui.position.left除以元素的width，然后添加一个。

演示：http://jsfiddle.net/ThinkingStiff/BfzsJ/

脚本：

$( "#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; 
}

输出：