Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – Resizeable/Draggable and Containment on 2 Divs Malfunctioning?

I’m trying to have two 2 separate Divs resizable, draggable and in the SAME containment Div.
This is what I have tried.

$(".main .box1").draggable({ containment: ".main" }).resizable({ containment: ".main" });
$(".main .box2").draggable({ containment: ".main" }).resizable({ containment: ".main" });
body {
    background-color: #6A6A6A;
    overflow: hidden;
}

html,
body {
    height: 100%;
}

.box {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.main {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.box1 {
    position: absolute;
    top: 100px;
    left: 100px;
    width: 100px;
    height: 100px;
    background-color: black;
}

.box2 {
    position: absolute;
    top: 100px;
    right: 100px;
    width: 100px;
    height: 100px;
    background-color: black;
}
<div class="main">
    <div class="box1"></div>
    <div class="box2"></div>
</div>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.14.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
<script src="https://code.jquery.com/ui/1.14.1/jquery-ui.js"></script>

This only works on 1 Div. The other just disappears. In other ways, I tried the divs were always in sync.

So my question is How do you Have multiple Divs with the same Containment box?

Tags:

2

Answers


  1. 0

    Try this CSS and use each instead

    $(".main .box1, .main .box2").each(function() {
  $(this).draggable({
    containment: ".main"
  }).resizable({
    containment: ".main"
  });
});
    body,
html {
  background-color: #6A6A6A;
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
}

.main {
  position: relative;
  width: 90%;
  height: 90%;
  margin: auto;
  top: 5%;
  border: 2px solid #fff;
  background-color: #2a2a2a;
  overflow: hidden;
}

.box1,
.box2 {
  width: 100px;  /* Default dimensions */
  height: 100px;
  background-color: black;
  border: 1px solid white;  /* For better visibility */
  box-sizing: border-box;   /* Consistent sizing when resizing */
}

.box1 {
  top: 10px;
  left: 50px;
}

.box2 {
  top: 10px;
  left: 160px;
}
    <div class="main">
  <div class="box1"></div>
  <div class="box2"></div>
</div>

<link rel="stylesheet" href="https://code.jquery.com/ui/1.14.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.14.1/jquery-ui.min.js"></script>
    Login or Signup to reply.
  2. 0

    Try this solution:

      $(document).ready(function() {
        $(".main .box1").draggable({ containment: "parent" }).resizable({ containment: "parent" });
        $(".main .box2").draggable({ containment: "parent" }).resizable({ containment: "parent" });
    });



<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Draggable and Resizable Boxes</title>
        <link rel="stylesheet" href="https://code.jquery.com/ui/1.14.1/themes/base/jquery-ui.css">
        <style>
            body {
                background-color: #6A6A6A;
                overflow: hidden;
                margin: 0;
                padding: 0;
            }
            .main {
                position: relative;
                width: 100vw;
                height: 100vh;
            }
            .box1, .box2 {
                position: absolute;
                width: 100px;
                height: 100px;
                background-color: black;
            }
            .box1 {
                top: 100px;
                left: 100px;
            }
            .box2 {
                top: 100px;
                right: 100px;
            }
        </style>
    </head>
    <body>
    <div class="main">
        <div class="box1"></div>
        <div class="box2"></div>
    </div>
    <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
    <script src="https://code.jquery.com/ui/1.14.1/jquery-ui.js"></script>
    <script>
    $(document).ready(function() {
        $(".main .box1, .main .box2").draggable({ containment: "parent" }).resizable({ containment: "parent" });
    });
    </script>
    </body>
    </html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search