CODEWITHSUNDEEP
jquerycssjquery-uiz-indexjquery-ui-draggable
user4587067
user4587067

Reputation:

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

I am working on developing a dashboard which will contain data in tiles. Right now I have implemented the Jquery-UI for draggable and resizeable divs. I have also limit the min max height and width but now I am having a problem with dragging and resizing. How I can control the z-Index of the elements as I restrict the draggable and resizeable elements to remain inside of its parent. But initially when the tiles are created they are eventually goes outside until I clicks and drag them inside of parent.

<!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>

Upvotes: 3

Views: 2774

Answers (1)

Suhaib Janjua
Suhaib Janjua

Reputation: 3574

Try t to stack your divs instead of worring about z-index and for showing the div at top after click but not dragged you need to use the following code.

So for stacking you need stack: "div" and for showing the div element on the top by simply click, you need to use distance: 0.

By default the value is distance: 10 which means until you don't drag it 10 pixels, it won't show up on the top. By setting the value to distance: 0 makes it show on the top after a simple click.

Try the following code.

<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.

Upvotes: 2

Related Questions