Question

与此同时，我进行了一些额外的测试并限制了我的原始问题的核心：

Firefox 33（OSX，Win 7）存在问题
在Safari（OSX）中，它可以正常工作。
在IE 11（Win 7）中，它部分工作（光标活动未正确释放..）

请参阅下面的测试代码。

我的问题是：当文本长于定义的div大小时，滚动条将按原样显示。但是由于Main div的排序，当我尝试用鼠标移动滚动条时，我移动了div。当然我仍然可以使用鼠标滚轮在内部div中滚动。但它对我来说看起来并不友好。

我的想法是在外部div中显示图标或标题栏，并且只有当用户在图标或标题栏上时，他才能移动div。在这些图标或标题栏之外，div不会移动。

不幸的是，说实话，我不知道如何实现这种开/关可切换功能。

有什么建议吗？

THX 沃尔夫冈

P.S。从http://jquery.com/download/

下载最新的jquery（v2）

最新jquery-UI从http://jqueryui.com/download/下载最新版本，所有检查关闭，然后选择RESIZABLE和SORTABLE，以及Theme =“No Theme”。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset='utf-8'" />
    <meta name="viewport" content="width=1024" />
    <title>Test</title>

    <style type="text/css">@import url(./jquery-ui.min.css);</style>
    <script src="./jquery-2.1.1.min.js" type="text/javascript"></script>
    <script src="./jquery-ui.min.js" type="text/javascript"></script>

    <script type="text/javascript">
        $(function() {
            $( "#MainData" ).sortable({
                cancel: ".ui-state-disabled"
            });
            $( "#MainData" ).disableSelection();
        });
    </script>

    <style type="text/css">
html {
    height: 100%;
}

body {
    color: #000;
    font-weight: 400;
    line-height: 1.5em;

    position: relative;
    margin: 0;
    padding: 0;
    width: 99.9%;
    height: 99.9%;
    overflow: scroll;
    background-color: #FFF;
    border: none;
}

.Main {
    position: absolute;
    z-index: 5;
    margin-top: 3rem;
    margin-left: 3rem;
    margin-right: 6rem;
    margin-bottom: 6rem;
}

.MainData {
    left: 0;
    float: left;
    border: 1rem solid;
    border-color:#000;
    padding: 2rem;
    margin: 2rem;
}

.BoxResize {
    width: 25rem;
    height: 15.45rem;
    min-width: 25rem;
    min-height: 15.45rem;
    float: left;
    border: 0.05rem solid;
    border-color:#000;
    padding: 1rem;
    margin: 1rem;
}
.BoxInner {
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 0;
    padding: 0;
    margin: 0;
    overflow: auto;
}
    </style> 
</head>

<body>

    <div class="Main" id="Main"> 
        <div class="MainData" id="MainData">

            <div class="BoxResize" id="BoxResize1">
                <div class="BoxInner" id="BoxInner">
                    <h1>Box 1</h1>
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut odio. Nam sed est. Nam a risus et est iaculis adipiscing. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer ut justo. In tincidunt viverra nisl. Donec dictum malesuada magna. Curabitur id nibh auctor tellus adipiscing pharetra. Fusce vel justo non orci semper feugiat. Cras eu leo at purus ultrices tristique.<br /><br /></p>
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut odio. Nam sed est. Nam a risus et est iaculis adipiscing. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer ut justo. In tincidunt viverra nisl. Donec dictum malesuada magna. Curabitur id nibh auctor tellus adipiscing pharetra. Fusce vel justo non orci semper feugiat. Cras eu leo at purus ultrices tristique.<br /><br /></p>
                </div>
            </div>

            <div class="BoxResize" id="BoxResize2">
                <div class="BoxInner" id="BoxInner">
                    <h1>Box 2</h1>
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut odio. Nam sed est. Nam a risus et est iaculis adipiscing. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer ut justo. In tincidunt viverra nisl. Donec dictum malesuada magna. Curabitur id nibh auctor tellus adipiscing pharetra. Fusce vel justo non orci semper feugiat. Cras eu leo at purus ultrices tristique.<br /><br /></p>
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut odio. Nam sed est. Nam a risus et est iaculis adipiscing. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer ut justo. In tincidunt viverra nisl. Donec dictum malesuada magna. Curabitur id nibh auctor tellus adipiscing pharetra. Fusce vel justo non orci semper feugiat. Cras eu leo at purus ultrices tristique.<br /><br /></p>
                </div>
            </div>

            <div class="BoxResize" id="BoxResize3">
                <div class="BoxInner" id="BoxInner">
                    <h1>Box 3</h1>
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut odio. Nam sed est. Nam a risus et est iaculis adipiscing. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer ut justo. In tincidunt viverra nisl. Donec dictum malesuada magna. Curabitur id nibh auctor tellus adipiscing pharetra. Fusce vel justo non orci semper feugiat. Cras eu leo at purus ultrices tristique.<br /><br /></p>
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut odio. Nam sed est. Nam a risus et est iaculis adipiscing. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer ut justo. In tincidunt viverra nisl. Donec dictum malesuada magna. Curabitur id nibh auctor tellus adipiscing pharetra. Fusce vel justo non orci semper feugiat. Cras eu leo at purus ultrices tristique.<br /><br /></p>
                </div>
            </div>

        </div>
    </div>
</body>
</html>

在DIV上排序的jQuery UI使滚动条无法使用

0 个答案: