jQueryで配置された要素の現在位置を特定することができます。ソート可能なプラグイン

Question

jQuery UI Sortableプラグインを使用して、ページ上の要素を移動します。私の要素は3つの列と3つの行に分かれています。オブジェクトを動かすと、要素の位置（最初の行 - 最初の列、最初の行の3番目の列など）を知りたい。

はここでの例です：あなたは要素を移動するとjQuery UI Sortable plug-in

Answer 1

、sortchangeイベントが起動されます。このイベントの2番目のパラメータには、移動された要素に関する情報が含まれます。探しているプロパティは.offsetで、移動したばかりの要素の位置が表示されます。行を取得するには、ui.position.topを要素のheightで割り、1つを追加します。列を取得するには、ui.position.leftを要素のwidthで割り、1つを追加します。

デモ：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; 
} 

出力：