確定使用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; 
} 

輸出：