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

输出：