Сортируемый обработчик не вызывается, если вы перетаскиваете слишком быстро - PullRequest
Новая
       18

Сортируемый обработчик не вызывается, если вы перетаскиваете слишком быстро

3 голосов
/ 12 марта 2012

JSFiddle Source

Если вы перетащите элемент из списка источников в список назначения очень быстро, обработчик удаления не сработает.

Я тестировал в FF 10, Chrome 17 и IE 9 с тем же результатом.

Чтобы проверить это, перетащите элемент из списка слева в область справа, как обычно. Вы увидите, что флажок был добавлен к элементу после его удаления. Кроме того, журнал выводится на консоль.

Но если вы перетаскиваете очень быстро, вы не увидите ни флажок, ни журнал. Возможно, вам придется попробовать его пару раз, чтобы увидеть проблему.

Похоже, что существует задержка в процессе запуска, распространения или отлова. Есть идеи, что здесь происходит?

Я тоже пробовал использовать теги div и span, и получаю тот же результат.

1 Ответ

3 голосов
/ 20 марта 2012

Итак, я только что проверил вашу проблему, и происходит то, что вы перемещаете li над правым ul, но вы отбрасываете li за пределами правого ul, и он возвращается к правому вместо левого, но так как вы не уронили его в правую улицу, событие сброса не сработало.

Проверьте следующий (без ответа) вопрос о похожей проблеме: https://stackoverflow.com/questions/7775769/sortable-and-droppable-issue-returning-to-original-sortable-list

ВыЕсть два варианта, чтобы это исправить: уберите опцию connectWith при создании сортируемых таблиц и продолжайте использовать droppables, или оставьте connectWith и используйте событие receive от sorttable: 

$( function() {
    // make the two list boxes sortable        
    $( '#source, #destination' ).sortable({
        connectWith: $( 'ul' )
    });

    // when an item is dropped on destination list box (right one),
    // a checkbox is added to it
    $( '#destination' ).bind("sortreceive", function( e, ui ) {
        var label = $( ui.item[0] ).text();
        console.log( label + ' dropped to destination list box' );
        $( ui.item[0] ).remove();
        $( this ).append( '<li><label><input name="categories[]" type="checkbox" /> '+ label +'</label></li>');
    }); 

    // when an item is dropped on the source list box (left one),
    // the checkbox is remove
    $( '#source' ).bind("sortreceive", function( e, ui ) {
        var label = $( ui.item[0] ).text();
        $( ui.item ).remove();            
        $( this ).append( '<li>' + label + '</li>' );
    });
});​
...