我在使用jQuery UI 1.7.2中的可排序列表时，在Firefox 3.6中遇到了问题，但IE7-8正常工作。当我向下滚动一点时，助手元素似乎有一个相同高度的偏移量，这使得原来开始拖动的项变得不可见。
如何修复此问题或解决此问题？如果没有解决方案，有没有非常好的替代可拖动插件？
以下是我的可排序初始化参数。
$("#sortable").sortable( {placeholder: 'ui-state-highlight' } );
$("#sortable").disableSelection();
overflow: auto。如果您通过Firebug查看源代码，则可以在jQuery在其示例中使用此方法。position:relative 是一个相当严重的限制。 - Bart Gloudemansposition:relative则无效。 - Björnposition: static;和overflow: auto;的组合对我很有帮助。 - Pierluc SS对我来说使用overflow: auto;不是一种选项。我通过使用这个 sort 事件处理程序解决了这个问题：
使用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。
containment选项无用。 - zykadelic我遇到了这个问题，通过在页面中的一个包含 div 上删除 css 规则 position:relative，解决了它。参见：http://forum.jquery.com/topic/sortable-offset-when-element-is-dragged-and-page-scrolled-down-ff
我也遇到了这个问题，并通过以下代码解决了它：
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'});
}
});
我发现，如果您在可排序元素上滚动，仍然存在问题。也许有人能够为此提供解决方案？
更新： 解决方法如下：
$sortable_elements.sortable({
connectWith: '#personal-favs ul.fitems',
sort: function(event, ui) {
ui.helper.css({'top' : ui.position.top + $(window).scrollTop() + 'px'});
}
});
但是，如果你要离开这个列表，排序事件好像会停止。
您还需要考虑到这是针对Firefox特定的情况，以下是我使用的片段——我从Harris的解决方案中找到了正确的方法。当可排序的元素位于相对定位的容器中时，我在不使用helper时遇到了这个问题。
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();
html { overflow-x: hidden; }来解决了这个问题。不可思议。 - Jason我成功找到了解决方法：
$( "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()值添加到helper的位置，然后您需要监听可排序列表的“beforeStop”事件，在项目被正式放置回新位置之前删除该偏移量。
希望对某人有所帮助！
我在网站上强制使用滚动条，因此这个可滚动的偏移问题是由于我的CSS中有html { overflow-y: scroll }引起的。
当我打开和关闭可滚动性时，我使用以下方法来解决它。我只在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');
}
}
显然，这并不是百分之百可靠的——如果在排序过程中文档大小发生变化，则需要进行其他操作。但是，在我的经验中，在这种情况下看起来不那么奇怪。
$(...).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'});
}
},
...
});
希望这有所帮助。
我使用更新的jQuery/jQuery UI版本“修复”了这个问题。
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 );
}
}
});