jQuery UI поддающийся сортировке элемент помощника прокрутки сместил проблему Firefox
У меня есть проблема с UI jQuery 1.7.2 поддающихся сортировке списков в Firefox 3.6, IE7-8 хорошо работают. Когда я прокручен вниз немного, элемент помощника, кажется, имеет смещение той же высоты, что я прокручен вниз от указателя мыши, который лишает возможности видеть, какой объект Вы первоначально начали перетаскивать. Как я фиксирую это или работаю вокруг проблемы? Если нет никаких, фиксируют то, что действительно хорошее альтернативное перетаскивание - способный плагин?
Вот мои параметры инициализации для поддающегося сортировке.
$("#sortable").sortable( {placeholder: 'ui-state-highlight' } );
$("#sortable").disableSelection();
4 ответа
Я наблюдал эту проблему и смог решить ее, удалив css-правило position:relative из одного из содержащих div на моей странице. См. также: http://forum.jquery.com/topic/sortable-offset-when-element-is-dragged-and-page-scrolled-down-ff
Мне удалось найти исправление для этого:
$( "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'
});
По сути, вам нужно прослушивать событие "start" сортируемого объекта, чтобы добавить текущее значение scrollTop () браузера к позиции помощника, а затем вам нужно прослушать событие "beforeStop" объекта сортировки, чтобы удалить это смещение до того, как элемент будет официально помещен обратно в список в его новой позиции.
Надеюсь, это кому-то поможет!
Вы также должны учитывать тот факт, что это специфично для 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 разных вызова в зависимости от браузера.
Если вы хотите предотвратить прослушивание браузера, единственное решение CSS - установить ul или стиль контейнера на overflow: auto . Если вы посмотрите на исходный код через firebug, то увидите, как jQuery делает это в своем примере .