Question

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

在我的内容的底部，我有一个jquery可排序的div，里面有两个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%;
}

感谢社区！

Answer 1

我最终（黑客）通过做两件事来解决这个问题。事实证明，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)    
    });
}

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

IE7 / 8 jquery可排序导致窗口捕捉到顶部

1 个答案: