JqueryUI | Unable to drag elements to the front

Author - Harpal Singh
12.03.2018
|
0 Comments
|

Problem: When we add draggable elements dynamically or even statically elements created subsequently will have higher z-index than the elements created before these elements which cause the problem of overlapping on dragging the image. When we drag element with lower z-index it will be behind the other elements which have higher z-index as shown below.

As an example, here we have sample divs which are draggable and cause the problem of overlapping:

<style type="text/css"> 
            div{
              height: 100px;
              width: 100px;
            }
      </style>
      <script type="text/javascript">
        $(document).ready(function(){
          $('#drag1').draggable();
          $('#drag2').draggable();
          $('#drag3').draggable();
          $('#drag4').draggable();
        });
      </script>
   </head>
   <body style="background-color: grey;">
   <div id="drag1" style="background-color: red;"></div>
   <div id="drag2" style="background-color: green;"></div>
   <div id="drag3" style="background-color: blue;"></div>
   <div id="drag4" style="background-color: yellow;"></div>
   </body>

As  blue colour div has lower z-index and due to this we can’t move it over the yellow colour div which has higher z-index than blue colour div.

Solution:

1.  To resolve this problem we have to add an option in a draggable method as shown below:

                          $(‘#drag1’).draggable({stack:”div”});

Selector for stack will be elements for which z-index should be handled automatically like in this case selector is  ‘div’.

2.  Now apply this method to all divs whose z-index should be automatically handled then code will become as shown below:

<style type="text/css">
            div{
              height: 100px;
              width: 100px;
            }
            #stack{
              width: 100%;
              height: 100%;
            }
      </style>
      <script type="text/javascript">
        $(document).ready(function(){
          $('#drag1').draggable({stack:"div"});
          $('#drag2').draggable({stack:"div" });
          $('#drag3').draggable({stack:"div"});
          $('#drag4').draggable({stack:"div"});
        });
      </script>
   </head>
   <body style="background-color: grey;">
   <div id="stack">
   <div id="drag1" style="background-color: red;"></div>
   <div id="drag2" style="background-color: green;"></div>
   <div id="drag3" style="background-color: blue;"></div>
   <div id="drag4" style="background-color: yellow;"></div>
   </div>
   </body>

Now you get draggable divs with automatic z-index handling:

Webner Solutions is a Software Development company focused on developing Insurance Agency Management Systems, Learning Management Systems and Salesforce apps. Contact us at dev@webners.com for your Insurance, eLearning and Salesforce applications.

Leave a Reply

Your email address will not be published. Required fields are marked *