Question

我正在开发一个包含瓷砖数据的仪表板。现在我已经为可拖动和可调整大小的div实现了Jquery-UI。我还限制了最大最大高度和宽度，但现在我遇到了拖动和调整大小的问题。我如何控制元素的z-Index，因为我限制可拖动和可调整大小的元素保留在其父元素内。但是最初在创建切片时，它们最终会出现，直到我点击并将它们拖到父级内部。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Dashboard</title>

    <link href="css/jquery-ui/jquery-ui.min.css" rel="stylesheet" />

    <style type="text/css">
        .statsTile
        {
            min-width: 180px;
            width: 180px;
            min-height: 180px;
            height: 180px;
            padding: 0.5em;
            background: white;
            position: fixed !important;
        }

            .statsTile h4
            {
                text-align: center;
                margin: 0;
            }

        #container
        {
            width: 800px;
            height: 500px;
            background: #666666;
            float: left;
        }

    </style>

    <script src="scripts/jquery/jquery-2.1.3.min.js"></script>
    <script src="scripts/jquery-ui/jquery-ui.min.js"></script>

    <script type="text/javascript">

        $(function () {
            $("#wrapper #container .ui-widget-content.statsTile").draggable({
                cursor: 'move',
                containment: 'parent'
            });

            $("#wrapper #container .ui-widget-content.statsTile").resizable({
                containment: 'parent'
            });
        });

    </script>

</head>
<body>
    <div id="wrapper">
        <div id="container">
            <div class="ui-widget-content statsTile">
                <h4 class="ui-widget-header">Call Abbondaned</h4>
            </div>
            <div class="ui-widget-content statsTile">
                <h4 class="ui-widget-header">Abbondaned %</h4>
            </div>
            <div class="ui-widget-content statsTile">
                <h4 class="ui-widget-header">Average Ring Time</h4>
            </div>
            <div class="ui-widget-content statsTile">
                <h4 class="ui-widget-header">Call Answered</h4>
            </div>
        </div>
    </div>
</body>
</html>

Answer 1

请尝试stack divs z-index而不是担心stack: "div"，并在点击后显示div而不是拖动，您需要使用以下代码。

因此，对于堆叠，您需要distance: 0并且只需点击一下即可显示顶部的div元素，您需要使用distance: 10。

默认值为10 pixels，这意味着在您不拖动它distance: 0之前，它不会显示在顶部。通过将值设置为<script type="text/javascript"> $(function () { $("#wrapper #container .ui-widget-content.statsTile").draggable({ cursor: 'move', containment: 'parent', stack: "div", distance: 0 }); $("#wrapper #container .ui-widget-content.statsTile").resizable({ containment: 'parent', zIndex: false }); }); </script>，只需点击一下即可显示在顶部。

请尝试以下代码。

{{1}}

<强> Working Fiddle Here.

在父容器内的可拖动和可调整大小的div中，jquery UI与z-Index有关

1 个答案: