IE7/8中使用jquery sortable导致窗口自动滚动到顶部

Question

我遇到了一个IE相关的问题，当窗口大小小于可用内容时（例如窗口模式），滚动条会变得可用[正常行为]。仅在IE 7/8中出现此问题（9只有在兼容模式下才有此问题，并且没有兼容模式无法使用（我知道IE9 jquery.sortable问题）），当我需要向下滚动页面与这些元素交互时，窗口立即回到页面顶部，导致字段集移动到视口之外。在其他浏览器或窗口内容未被滚动时，这不是问题。

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

有人见过这样的问题吗，在与拖放元素交互后，IE会回到页面顶部，导致元素移出视口？

一些代码：

<!-- language: lang-html -->
<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：

<!-- language: lang-js -->
// 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%;
}

感谢社区！

- Evan

Answer 1

我最终通过两个步骤来（黑客）修复了这个问题。原来IE将我的div渲染在视口底部，而不是相对于页面本身的位置。我仍然不知道如何解决IE呈现HTML元素的根本问题。 首先，我为容器div（#rateEditor）添加了“position: relative”属性。

我还添加了以下代码以检测IE。与上面的代码相同，只有一些小的区别。即，包含范围扩展到body，并且单击时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)    
    });
}

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

- totowtwo