Смещение вспомогательного элемента прокрутки сортируемого пользовательского интерфейса jQuery в Firefox

Question

У меня проблема с сортируемым списком jQuery UI 1.7.2 в Firefox 3.6, IE7-8 работает нормально. Когда я немного прокручиваюсь, вспомогательный элемент, кажется, имеет смещение той же высоты, что и я. прокручивается вниз от указателя мыши, что делает невозможным увидеть, какой элемент вы изначально начали перетаскивать. Как мне это исправить или обойти проблему? Если нет исправления, что является действительно хорошим альтернативным плагином с возможностью перетаскивания?

Вот мои параметры инициализации для сортируемого.

$("#sortable").sortable( {placeholder: 'ui-state-highlight'  } );
$("#sortable").disableSelection();

Answer 1

Суммируйте ваши усилия и предоставьте законченное решение. Кажется, что следующее работает для Chrome 40+ и Firefox 30 +

var isFirefox = /firefox/.test(navigator.userAgent.toLowerCase());
$('#target').sortable({
    connectWith: '#target-holder .elements',
    handle: ".element-header",
    start: function(ev, ui) {
        if( isFirefox ) {
            ui.item.css('margin-top', $(window).scrollTop() );
        }
    },
    sort: function(ev, ui) {
        if( isFirefox) {
            ui.helper.css({'top' : ui.position.top - $(window).scrollTop() + 'px'});
        } else {
            ui.helper.css({'top' : ui.position.top + $(window).scrollTop() + 'px'});
        }
    },
    beforeStop: function (ev, ui) {
        if( isFirefox ) {
            ui.item.css('margin-top', 0 );
        }
    }
});

Answer 2

для будущих читателей Я столкнулся с подобной проблемой, когда вспомогательный элемент имеет смещение при перетаскивании внутри прокручиваемого div диалогового окна начальной загрузки. При освобождении перетаскиваемого объекта анимация отправляет перетаскиваемый вспомогательный элемент в его новую позицию без учета прокручиваемой части страницы, что дает пользователям путаницу.

Чтобы все работало с позицией: относительной и переполнением-у: авто в диалоговом контейнере, мое решение было

1 - добавить смещение scrollTop () к верхнему краю вспомогательного объекта в событии начала сортировки;

2 - убрать верхнюю границу в событии beforeStop

Это исправило отключение анимации после перетаскивания, но вспомогательный объект помещался ниже курсора при перетаскивании прокручиваемой части на странице. Последнее исправление

3 - Вычислить и установить свойство top вспомогательного объекта при перетаскивании (используя событие сортировки) относительно указателя и смещения контейнера.

$(...).sortable({
...
start: function (event, ui) {  
    ui.helper.css('margin-top', $("#mybootstrap-dialog").scrollTop()); 
},
beforeStop: function (event, ui){ 
    ui.helper.css('margin-top',0); 
},
sort: function(event, ui) {
    var top = event.clientY - $('#my-sortable-ul').offset().top  -  $("#mybootstrap-dialog").scrollTop();
    ui.helper.css({'top' : top + 'px'});
    }
},
...

});

Помогите, это помогает

Answer 3

Для будущих читателей с этой проблемой. Я обновил jqueryui 1.8 до 1.10.3, и проблема была решена без исправлений css.

http://jqueryui.com/

Я также обновился с jquery 1.8 до 1.10.2

http://jquery.com/

Answer 4

Была такая же проблема. В моем случае было невозможно использовать «overflow: auto» -fix. Вот что я сделал.

var pos_fixed = 1;        // switch variable (the fix should only be fired ones)
$('.drag').draggable({
 start: function(event, ui){
  pos_fixed = 0;            // we're about to start, set to not fixed yet
 },
 drag: function(event, ui){
  if(pos_fixed == 0){       // check if the fix hasn't been fired for this instance yet
   var help_pos = $(ui.helper).offset().top, // get helpers offset
   targ_pos = $(event.target).offset().top,  // get targets(the dragged elements) offset
   marg = targ_pos-help_pos; // calculate the margin the helper has to have to put it on the same y-position as our target
   $(ui.helper).css('margin-top', marg); // put our helper on the same y-position as the target
   pos_fixed = 1;            // we've fixed it, we don't want it to fire again
  }
 }
});

Исправлению не важно, какой браузер вы используете. Он всегда будет следить за тем, чтобы у помощника было то же смещение по оси y, что и у цели, когда начинается перетаскивание.

Answer 5

Настройка overflow: auto заставляет Firefox запускать перетаскивание с элементом под указателем, но также предотвращает правильную работу автопрокрутки. Вы можете увидеть это прямо в примере jQuery Sortable, если вы сделаете окно настолько маленьким, что необходима прокрутка.

У меня было overflow: scroll в теге html, но даже удаление этого и (я думаю) все относящиеся к нему элементы не полностью решили проблему (то есть перетаскивание начинается правильно и автопрокрутка работает). Я также попробовал патч для проверки на наличие мозоли в _findRelativeOffset (думаю, так оно и было), но это не помогло.

Что помогло в моем случае использования, так это просто перетаскивание с клоном (helper: 'clone' в конструкторе с возможностью перетаскивания). Чтобы это выглядело так, как будто клона не было, я добавил методы start и stop, которые просто устанавливают видимость на скрытый, а затем обратно.

Я бы прокомментировал выше, но у меня пока нет очков.