Определить текущую позицию элемента с помощью плагина jQuery Sortable - PullRequest
Новая
       54

Определить текущую позицию элемента с помощью плагина jQuery Sortable

1 голос
/ 21 июля 2011

Я использую плагин jQuery UI Sortable для перемещения элементов на моей странице. Мои элементы разделены на три столбца и три строки. Когда я перемещаю объект, я хочу знать положение моего элемента (первый ряд - первый столбец, первый ряд - третий столбец и т. Д.).

Вот пример: jQuery UI Сортируемый плагин

1 Ответ

0 голосов
/ 16 января 2012

При перемещении элемента происходит событие 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; 
}

Вывод:

enter image description here

...