Сортировка JQuery 'изменить' положение элемента события - PullRequest
Новая
       17

Сортировка JQuery 'изменить' положение элемента события

53 голосов
/ 10 февраля 2011

Есть ли способ получить текущую позицию помощника, перетаскиваемого поверх новой позиции? 

$("#sortable").sortable({
        start: function (event, ui) {
            var currPos1 = ui.item.index();
        },
        change:  function (event, ui) {
            var currPos2 = ui.item.index();
        }
});

Кажется, что currPos1 и currPos2 имеют одинаковое значение, когда происходит реальное изменение!

Что яНужно добиться того, чтобы пользователь выделил все позиции между «элементом начального перетаскивания» и «замененным элементом».Как только пользователь отпускает кнопку мыши, происходит обновление, и только тогда я получаю новую позицию, но она мне нужна до отпускания мыши.

Ответы [ 5 ]

88 голосов
/ 10 февраля 2011

ОБНОВЛЕНО: 26/08/2016 для использования последней версии jquery и jquery ui, а также для начальной загрузки. демо: http://so.lucafilosofi.com/jquery-sortable-change-event-element-position/ $(function() { $('#sortable').sortable({ start: function(event, ui) { var start_pos = ui.item.index(); ui.item.data('start_pos', start_pos); }, change: function(event, ui) { var start_pos = ui.item.data('start_pos'); var index = ui.placeholder.index(); if (start_pos < index) { $('#sortable li:nth-child(' + index + ')').addClass('highlights'); } else { $('#sortable li:eq(' + (index + 1) + ')').addClass('highlights'); } }, update: function(event, ui) { $('#sortable li').removeClass('highlights'); } }); });

17 голосов
/ 18 июля 2012

Это работает для меня: 

start: function(event, ui) {
        var start_pos = ui.item.index();
        ui.item.data('start_pos', start_pos);
    },
update: function (event, ui) {
        var start_pos = ui.item.data('start_pos');
        var end_pos = ui.item.index();
        //$('#sortable li').removeClass('highlights');
    }
4 голосов
/ 17 января 2012

Используйте события update, stop и receive, проверьте здесь

Событие обновления с сортировкой Jquery может вызываться только один раз?

3 голосов
/ 29 октября 2015

Если кого-то интересует сортируемый список с изменяющимся индексом для каждого элемента списка (1-й, 2-й, 3-й и т. Д.)как это: 

<ul class="sortable ">
<li >        
    <div>
        <span class="ordinal-position">1st</span>
         A header
    </div>
    <div>
        <span class="icon-button handle"><i class="fa fa-arrows"></i></span>
    </div>
    <div class="bpdy" >
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    </div>
</li>
 <li >        
    <div>
        <span class="ordinal-position">2nd</span>
         A header
    </div>
    <div>
        <span class="icon-button handle"><i class="fa fa-arrows"></i></span>
    </div>
    <div class="bpdy" >
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    </div>
</li>
etc....
</ul>
0 голосов
/ 01 июля 2014 
$( "#sortable" ).sortable({
    change: function(event, ui) {       
        var pos = ui.helper.index() < ui.placeholder.index() 
            ? { start: ui.helper.index(), end: ui.placeholder.index() }
            : { start: ui.placeholder.index(), end: ui.helper.index() }

        $(this)
            .children().removeClass( 'highlight' )
            .not( ui.helper ).slice( pos.start, pos.end ).addClass( 'highlight' );
    },
    stop: function(event, ui) {
        $(this).children().removeClass( 'highlight' );
    }
});

FIDDLE

Пример того, как это можно сделать внутри события изменения без сохранения произвольных данных в хранилище элементов.Поскольку элемент, с которого начинается перетаскивание, равен ui.helper, а элемент текущей позиции равен ui.placeholder, мы можем взять элементы между этими двумя индексами и выделить их.Также мы можем использовать this внутри обработчика, так как он ссылается на элемент, к которому прикреплен виджет.Пример работает с перетаскиванием в обоих направлениях.

...