IE7 / 8 jquery可排序导致窗口捕捉到顶部(IE7/8 jquery sortable is causing window to snap to top)

我有一个IE相关的问题，每当窗口的大小设置为视口小于可用内容（例如窗口模式）时，滚动条就变得可用[正常行为]。仅在IE 7/8中（9只在兼容模式下出现此问题，并且在没有兼容模式的情况下无效（我知道IE9 jquery.sortable问题）），当我需要在页面上向下滚动以与这些进行交互时元素，当我开始拖动其中一个元素时，窗口会快速回到页面顶部，从而导致字段集移动到视口之外。这在其他浏览器中不是问题，或者窗口内容尚未滚动时。

在我的内容的底部，我有一个jquery可排序的div，里面有两个fieldset。与这些字段集中的数据进行交互的正常行为（包含在公共div中）是在两者之间拖动无序列表项（ul> li）。

有没有人之前看过这样的问题 - 在与拖放元素交互后，IE会快速回到页面顶部，从而导致元素移出视口？

一些代码：

<div id="rateEditor" class="rateEditorCL"> <fieldset> <legend>Available Calling Plans</legend> <ul id="inactiveProductList" class="ratePlanList ui-sortable" unselectable="on" style="-moz-user-select: none;"> <li class="ratePlan" data-planid="7">Africa</li> <li class="ratePlan" data-planid="5">India</li> </ul> </fieldset> <fieldset> <legend>Assigned Calling Plans</legend> <ul id="activeProductList" class="ratePlanList ui-sortable" unselectable="on" style="-moz-user-select: none;"> <li class="ratePlan" data-planid="1" style="">Mexico</li> <li class="ratePlan" data-planid="3" style="">Asia</li> </ul> </fieldset> </div>

和jquery：

// create a sortable, exchangable list of the Available and Active Rate plan lists. $('#inactiveProductList, #activeProductList').sortable({ // connect the lists by the ratePlanList class connectWith: ".ratePlanList", // contain the drag/drop to the wrapper div containment: '#rateEditor', // when a list recieves a new item, spin the elements into // arrays and send them off to our ajax updater function. receive:function(event,ui) { activeRates = new Array(); inactiveRates = new Array(); dId = $("#distributorId").val(); uId = $("#activeUserId").val(); $('#activeProductList li').each(function(i) { activeRates[i] = $(this).attr('data-planID'); }); $('#inactiveProductList li').each(function(i) { inactiveRates[i] = $(this).attr('data-planID'); }); updateAvailableRatePlans(activeRates,inactiveRates,dId,uId); } }).disableSelection(); });

和CSS（只是为了衡量）：

#rateEditor { float: left; margin: auto; text-align: center !important; width: 100%; } .rateEditorCL { border-left: medium none; border-right: medium none; border-top: medium none; display: block; float: left; margin: auto; padding: 1em; text-align: center; width: 100%; }

谢谢社区！

I have an IE related issue where, whenever the window is sized to have a viewport smaller than the available content (e.g. window mode), a scroll bar becomes available [normal behavior]. In IE 7 / 8 only (9 only has this issue in compatibility mode and doesn't work without compatibility mode (and I know about the IE9 jquery.sortable issue)), when I need to scroll down on the page to interact with these elements, the window snaps back to the top of the page the moment I start dragging one of the elements, causing the fieldsets to move outside of the viewport. This is not a problem in other browsers, or when the window content has not been scrolled.

At the bottom of my content, I have a jquery sortable div with two fieldsets inside of it. The normal behavior for interacting with the data in these fieldsets (contained within a common div) is dragging unordered list-items (ul > li) between the two.

Has anyone seen an issue like this before -- where IE snaps back to the top of the page after interacting with a drag and drop element, causing the element to move out of the viewport?

Some code:

<div id="rateEditor" class="rateEditorCL"> <fieldset> <legend>Available Calling Plans</legend> <ul id="inactiveProductList" class="ratePlanList ui-sortable" unselectable="on" style="-moz-user-select: none;"> <li class="ratePlan" data-planid="7">Africa</li> <li class="ratePlan" data-planid="5">India</li> </ul> </fieldset> <fieldset> <legend>Assigned Calling Plans</legend> <ul id="activeProductList" class="ratePlanList ui-sortable" unselectable="on" style="-moz-user-select: none;"> <li class="ratePlan" data-planid="1" style="">Mexico</li> <li class="ratePlan" data-planid="3" style="">Asia</li> </ul> </fieldset> </div>

And the jquery:

// create a sortable, exchangable list of the Available and Active Rate plan lists. $('#inactiveProductList, #activeProductList').sortable({ // connect the lists by the ratePlanList class connectWith: ".ratePlanList", // contain the drag/drop to the wrapper div containment: '#rateEditor', // when a list recieves a new item, spin the elements into // arrays and send them off to our ajax updater function. receive:function(event,ui) { activeRates = new Array(); inactiveRates = new Array(); dId = $("#distributorId").val(); uId = $("#activeUserId").val(); $('#activeProductList li').each(function(i) { activeRates[i] = $(this).attr('data-planID'); }); $('#inactiveProductList li').each(function(i) { inactiveRates[i] = $(this).attr('data-planID'); }); updateAvailableRatePlans(activeRates,inactiveRates,dId,uId); } }).disableSelection(); });

And CSS (just for good measure):

#rateEditor { float: left; margin: auto; text-align: center !important; width: 100%; } .rateEditorCL { border-left: medium none; border-right: medium none; border-top: medium none; display: block; float: left; margin: auto; padding: 1em; text-align: center; width: 100%; }

Thanks community!

最满意答案

我最后（黑客）通过做两件事来解决这个问题。事实证明，IE正在视口的底部渲染我的div，而不是相对于页面本身的位置。我仍然不知道如何解决IE呈现html元素的根本问题。首先，我为容器div（#rateEditor）添加了“position：relative”赋值。

我还添加了以下用于检测IE的代码。它与上面的代码相同，但有一些小差异。即，包容被扩展为主体，并且div高度设置为在点击时扩展到文档高度：

if ( $.browser.msie ) { $("#inactiveProductList, #activeProductList").sortable({ // connect the lists by the ratePlanList class connectWith: ".ratePlanList", // contain the drag/drop to the wrapper div containment: "body", //prevents the window from following the cursor when the element is dragged scroll: false, // when a list recieves a new item, spin the elements into // arrays and send them off to our ajax updater function. receive:function(event,ui) { activeRates = new Array(); inactiveRates = new Array(); dId = $("#distributorId").val(); uId = $("#activeUserId").val(); $('#activeProductList li').each(function(i) { activeRates[i] = $(this).attr('data-planID'); }); $('#inactiveProductList li').each(function(i) { inactiveRates[i] = $(this).attr('data-planID'); }); updateAvailableRatePlans(activeRates,inactiveRates,dId,uId); } }).disableSelection(); $("div").rateEditorCL('click', function () { $(this).height(document) }); }

我相信这个问题有更优雅的解决方案，欢迎任何更了解的人提供反馈。

I ended up (hack)fixing this myself by doing two things. It turns out that IE was rendering my div at the bottom of the viewport, and not in its position relative to the page itself. I still don't know how to fix the underlying problem of how IE renders html elements. First, I added a "position: relative" assignment for the container div (#rateEditor).

I also added the following code for detecting IE. It is the same as the code above with a few small differences. Namely, the containment was expanded to body, and the div height was set to expand to the document height on click:

if ( $.browser.msie ) { $("#inactiveProductList, #activeProductList").sortable({ // connect the lists by the ratePlanList class connectWith: ".ratePlanList", // contain the drag/drop to the wrapper div containment: "body", //prevents the window from following the cursor when the element is dragged scroll: false, // when a list recieves a new item, spin the elements into // arrays and send them off to our ajax updater function. receive:function(event,ui) { activeRates = new Array(); inactiveRates = new Array(); dId = $("#distributorId").val(); uId = $("#activeUserId").val(); $('#activeProductList li').each(function(i) { activeRates[i] = $(this).attr('data-planID'); }); $('#inactiveProductList li').each(function(i) { inactiveRates[i] = $(this).attr('data-planID'); }); updateAvailableRatePlans(activeRates,inactiveRates,dId,uId); } }).disableSelection(); $("div").rateEditorCL('click', function () { $(this).height(document) }); }

I am sure there are more elegant solutions for this issue and welcome feedback from anyone who knows any better.

更多推荐