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

Question

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

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

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

Answer 1

Если вы хотите предотвратить прослушивание браузера, единственное решение CSS - установить стиль ul или контейнера на overflow: auto. Если вы посмотрите на источник через firebug, jQuery сделает это в их примере .

Answer 2

Использование overflow: auto; для меня не вариант. Мне удалось обойти эту проблему с помощью этого sort обработчика событий:

$(...).sortable({
    ...
    sort: function(event, ui) {
        var $target = $(event.target);
        if (!/html|body/i.test($target.offsetParent()[0].tagName)) {
            var top = event.pageY - $target.offsetParent().offset().top - (ui.helper.outerHeight(true) / 2);
            ui.helper.css({'top' : top + 'px'});
        }
    },
    ...
});

Это не идеально, но не требует перехвата браузера. Протестировано в IE8, Chrome и Firefox.

Редактировать : используется jQuery 1.10.0 и jQuery UI 1.10.3.

Answer 3

Я видел эту проблему и смог ее решить, удалив позицию правила css: относительный из одного из содержащихся на моей странице divов Смотрите также: http://forum.jquery.com/topic/sortable-offset-when-element-is-dragged-and-page-scrolled-down-ff

Answer 4

У меня также была эта проблема, и я исправил ее с помощью следующего кода:

var wscrolltop = 0;
$sortable_elements.sortable({ 
    start: function(event, ui) {
        wscrolltop = $(window).scrollTop();
    },
    sort: function(event, ui) {                   
        ui.helper.css({'top' : ui.position.top + wscrolltop + 'px'});
    }
});

Я обнаружил, что проблема все еще существует, если вы прокручиваете свой сортируемый элемент. Может, у кого-нибудь есть решение для этого?

UPDATE: Исправление:

$sortable_elements.sortable({ 
    connectWith: '#personal-favs ul.fitems',
    sort: function(event, ui) {  
        ui.helper.css({'top' : ui.position.top + $(window).scrollTop() + 'px'});
    }
});

Но все же - если вы покидаете список, событие сортировки кажется остановленным.

Answer 5

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

  var options = { 
   handle: '.mover', 
   update:updateSorting 
 };
  var userAgent = navigator.userAgent.toLowerCase();
  if(userAgent.match(/firefox/)) {
    options["start"] = function (event, ui) { ui.item.css('margin-top', $(window).scrollTop() ); };
    options["beforeStop"] = function (event, ui) { ui.item.css('margin-top', 0 ); };
  }
  $("#" + list_id+"").sortable(options);
  $("#" + list_id+"").disableSelection();

Вы также можете выполнить эту проверку на сервере и затем сделать 2 разных вызова в зависимости от браузера.

Answer 6

Мне удалось найти решение для этого:

$( "items" ).sortable({
start: function (event, ui) {
 if( ui.helper !== undefined )
  ui.helper.css('position','absolute').css('margin-top', $(window).scrollTop() );
},
beforeStop: function (event, ui) {
 if( ui.offset !== undefined )
  ui.helper.css('margin-top', 0);
},
placeholder: 'placeholder-class'
});

По сути, вам нужно прослушать событие «начала» сортируемого, чтобы добавить текущее значение scrollTop () браузера в позицию помощника, а затем вам нужно прослушать событие «beforeStop» сортируемого, чтобы удалить это смещение перед элемент официально помещен обратно в список на новой позиции.

Надеюсь, это кому-нибудь пригодится!

Answer 7

Я заставляю полосы прокрутки на моем сайте, поэтому возникает проблема смещения прокрутки из-за наличия html { overflow-y: scroll } в моем CSS.

Когда я включал и выключал прокрутку, я использовал следующее, чтобы обойти это. Я тестировал только в IE8, FF12 и Chrome ...

  turnSortingOnOff:function(e) {
    e.preventDefault();

    if (stopOrdering()) {
      // get rid of the hacky css on the html element
      $('html').css({ 'overflow-y': '' });
      $('html').css({ 'margin-right': '' });

      elmt.sortable('disable');
    }
    else if (startOrdering()) {
      // if the body is smaller than the window
      // then there aren't any scrollbars
      // in which case, add a right hand margin of 16px
      // to the html to prevent the site wobbling
      if ($('body').outerHeight() <= $(window).height()) {
        $('html').css({ 'margin-right': 16 });
      }

      // then override the { overflow-y: scroll }
      // in the css by setting it to a nice, safe inherit
      $('html').css({ 'overflow-y': 'inherit' });

      elmt.sortable('enable');
    }
  }

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

Answer 8

Я "исправил" это, используя более новые версии пользовательского интерфейса jQuery / jQuery.

• jQuery 1.8.0
• jQuery UI 1.8.23

Answer 9

Мое решение: ".sortable", чтобы добавить "положение: относительно"

$(".sortable").sortable({
      sort: function(event, ui) {
           ui.position.top = ui.position.top + $(window).scrollTop();
      },
});

PS использовал jQuery UI 1.12.0 и jQuery 2.2.4

Answer 10

sort: function(e, ui){
        var tempVariable = $(ui.item.get(0));
        tempVariable.css('top', (e.clientY)-(tempVariable.css("height").replace("px", "")));
    }