Jquery UI 父容器内可拖动和可调整大小的 div 中的 z-Index 问题

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 并且为了在点击但不拖动后在顶部显示 div 你需要使用以下代码。

所以为了堆叠你需要 stack: "div" 并且为了通过简单的点击在顶部显示 div 元素，你需要使用 distance: 0.

默认值为 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>

Working Fiddle Here.

Jquery UI 父容器内可拖动和可调整大小的 div 中的 z-Index 问题

Jquery UI trouble with z-Index in both draggable and resizeable divs inside parent container

jquery

css

jquery-ui

z-index

jquery-ui-draggable