jQuery UIsorting滚动帮助器元素抵消Firefox的问题
我有一个问题，在Firefox 3.6，IE7-8的jQuery UI 1.7.2sorting列表工作正常。 当我向下滚动一点，助手元素似乎有一个高度相同的偏移量，我从鼠标指针向下滚动，这使得它不可能看到你最初开始拖动哪个项目。 我该如何解决这个问题或者解决这个问题？ 如果没有解决什么是一个非常好的替代可拖动插件？
这里是我的可sorting的初始化参数。
$("#sortable").sortable( {placeholder: 'ui-state-highlight' } ); $("#sortable").disableSelection(); 我看到这个问题，并能够通过删除css规则位置来解决它：从我的网页上的一个包含div的相对。 另见： http : //forum.jquery.com/topic/sortable-offset-when-element-is-dragged-and-page-scrolled-down-ff
如果你想阻止浏览器嗅探，CSS唯一的解决scheme是设置ul或容器风格overflow: auto 。 如果你通过萤火虫来看源代码，这是jQuery在他们的例子中做的方式。
使用overflow: auto; 对我来说不是一个select。 我能够解决这个问题与这种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'}); } }, ... });
这不是完美的，但它不需要浏览器嗅探。 testingIE8，Chrome和Firefox。
编辑 ：这是使用jQuery 1.10.0和jQuery UI 1.10.3。
我也有这个问题，并用下面的代码修复它：
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'}); } });
我发现，如果使用可sorting元素进行滚动，仍然存在问题。 也许有人有这个解决scheme？
更新：解决方法是：
$sortable_elements.sortable({ connectWith: '#personal-favs ul.fitems', sort: function(event, ui) { ui.helper.css({'top' : ui.position.top + $(window).scrollTop() + 'px'}); } });
但是，如果你要离开这个列表，sorting事件似乎停止了。
您还需要说明这是Firefox特有的事实，这里是我正在使用的代码片段 – 我从Harris的解决scheme中得到了正确的方法。 当sorting在一个相对定位的容器中时，我遇到了这个问题，没有使用帮助器。
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个不同的调用。
我设法找出这个问题的一个修复：
$( "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' });
基本上，您需要侦听可sorting的“开始”事件，以将浏览器的当前scrollTop（）值添加到帮助器的位置，然后您需要侦听可sorting的“beforeStop”事件，以在该项目正式重新列入新的职位名单。
希望对某人有帮助！
我强制在我的网站滚动条，所以这个可滚动的偏移量问题发生，因为在我的CSS有html { overflow-y: scroll } 。
当我打开和closures滚动，我用下面来解决它。 我只testing它在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'); } }
显然这不是防弹 – 如果文件大小在sorting时发生变化，那么其他的事情就必须完成。 但是，根据我的经验，在这种情况下看起来不那么怪异。
我使用较新的jQuery / jQuery UI版本“修复”这个问题。
- jQuery 1.8.0
- jQuery UI 1.8.23
设置overflow: auto使Firefox启动与指针下的元素的拖动，但它也阻止自动滚动正常工作。 您可以在jQuery Sortable示例中看到，如果将窗口设置得足够小，以至于需要滚动。
我有overflow: scroll的HTML标签，但即使删除和（我认为）所有相对包含元素并没有完全解决问题（意味着拖动开始正确，自动滚动工程）。 我也尝试了一个mozilla-sniffing补丁来_findRelativeOffset（我认为是这样），但它没有帮助。
有什么帮助我的用例只是拖着一个克隆（ helper: 'clone'在可拖动的构造函数helper: 'clone' ）。 为了让它看起来像克隆不在那里，我添加了启动和停止方法，只是将可见性设置为隐藏，然后返回。
我会在上面评论，但我还没有点。
有同样的问题。 在我的情况下，它不可能使用“溢出：自动”修补程序。 所以这就是我所做的。
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偏移量。
对于将来有这个问题的读者。 我从jqueryui 1.8升级到1.10.3和问题解决了没有css修复。
我也从jquery 1.8升级到1.10.2
对于未来的读者，我遇到了一个类似的问题，在助手元素在引导对话框的滚动div内拖动时有一个偏移量。 当释放被拖动的对象时，animation将拖拽的帮助器元素向其新的位置发送，而不考虑页面的滚动部分，这给用户带来了混淆的反馈。
为了使对象容器中的位置：relative和overflow-y：auto保持一致，我的解决scheme是
1-将scrollTop（）偏移量添加到sorting开始事件中辅助对象的页边距上;
2-删除beforeStop事件中的margin-top
这样可以避免在拖动之后closuresanimation，但是在拖动页面中的滚动部分的同时将帮助对象推到光标下方。 最后一个修正是
3-拖动（使用sorting事件）相对于指针和容器偏移，计算并设置助手对象的顶部属性。
$(...).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'}); } }, ...
}）;
帮助这个帮助
总结你的努力并提供一个完整的解决scheme。 以下似乎适用于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 ); } } });
我的解决scheme：“.sortable”添加“position：relative”
$(".sortable").sortable({ sort: function(event, ui) { ui.position.top = ui.position.top + $(window).scrollTop(); }, });
PS使用jQuery UI 1.12.0和jQuery 2.2.4
sort: function(e, ui){ var tempVariable = $(ui.item.get(0)); tempVariable.css('top', (e.clientY)-(tempVariable.css("height").replace("px", ""))); }
