JQuery Resizable : How to make multiples divs resizing independently

Question

I made a simple web application which allow you to add dynamic divs to a container div.

You can see how the app is looking here :

Before resizing

As you can see, when you click the link "Image" in the left menu, it add a new div in the div container with the black background.

Theses dynamics divs add by this way can be dragged and resized by jQuery with the jQuery ui draggable and resizable method.

the draggable function works well, but not the resizable. It seem like the divs are dependents, and when you try to resize it, it depends of the size of the others dynamics divs.

Here is the illustration of what I try to explain :

After resize

Like you can see, I tried to resize the div2, but because I add the div1 first, the div1 been resized too.

I want to make all div independent so I can resize it even if it overlap another div.

Here is my codes :

var bg = document.getElementById('bg');
bg.className = "centrer";

var ajoutImg = document.getElementById('ajoutImage');

var initDiagonal;
var initFontSize;

ajoutImg.onclick = function () {

  var moveDiv = document.createElement("div");
  moveDiv.className = 'encadrer';
  var titre = document.createElement("p");
  var para = document.createElement("p");
  titre.textContent = "Titre";
  titre.className = 'centrerTitre';
  moveDiv.appendChild(titre);
  para.textContent = prompt("Texte de l'image :");
  para.className = 'centrerPara';
  moveDiv.appendChild(para);
  bg.appendChild(moveDiv);
  $(function () {
    $(".encadrer")
    .draggable({ containment: "parent" })
    .resizable({
      containment: "parent",
      handles: "all"
    });
  });
};

 .centrer {
   display: block;
   margin: auto;
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   height: 640px;
   width: 360px;
   background-color: #000000;
 }

.menu {
  border: 1px solid black;
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 2px;
  padding-bottom: 2px;
  float: left;
}

.encadrer {
  display: table-cell;
  border: 1px solid white;
  vertical-align: middle;
}

.centrerTitre {
  color: white;
  margin: auto;
  text-align: center;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
  padding-right: 10px;
}

.centrerPara {
  font-size: 16;
  color: white;
  margin: auto;
  text-align: center;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
  padding-right: 10px;
}

/*----- Resizable ------*/
.ui-resizable {
  position: relative;
}

.ui-resizable-handle {
  position: absolute;
  font-size: 0.1px;
  z-index: 99999;
  display: block;
}

.ui-resizable-disabled .ui-resizable-handle, .ui-resizable-autohide .ui-resizable-handle {
  display: none;
}

.ui-resizable-n {
  cursor: n-resize;
  height: 7px;
  width: 100%;
  top: -5px;
  left: 0px;
}

.ui-resizable-s {
  cursor: s-resize;
  height: 7px;
  width: 100%;
  bottom: -5px;
  left: 0px;
}

.ui-resizable-e {
  cursor: e-resize;
  width: 7px;
  right: -5px;
  top: 0px;
  height: 100%;
}

.ui-resizable-w {
  cursor: w-resize;
  width: 7px;
  left: -5px;
  top: 0px;
  height: 100%;
}

.ui-resizable-nw {
  cursor: nw-resize;
  height: 7px;
  width: 7px;
  top: -5px;
  left: -5px;
}

.ui-resizable-se {
  cursor: se-resize;
  height: 7px;
  width: 7px;
  right: -5px;
  bottom: -5px;
}

.ui-resizable-ne {
  cursor: ne-resize;
  height: 7px;
  width: 7px;
  top: -5px;
  right: -5px;
}

.ui-resizable-sw {
  cursor: sw-resize;
  height: 7px;
  width: 7px;
  left: -5px;
  bottom: -5px;
}
/*----------------------*/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.css" rel="stylesheet" />

<div id="menu" class="menu">
    <h3>Ajouter des éléments</h3>
    <ul>
        <li><a id="ajoutImage" href="#" onclick="return false;">Image</a></li>
    </ul>
</div>
<div id="bg"></div>

I don't really know how to use the snippet system but you can see the code by this way :p

Sorry for the bad English and the var names.

Answer 1

I did some css and js changes to fix your problem:

1. Replace $(".encadrer") to $(moveDiv) because you don't want to call the plugin for all elements (.encadrer) in each time the user add an image.
2. The main problem was with the position of the images which was relative I changed it to absolut.
3. I removed the display:table-cell and vertical-align:middle. If you want to center the image you should do this using by following How to center absolute element in div.

var bg = document.getElementById('bg');
bg.className = "centrer";

var ajoutImg = document.getElementById('ajoutImage');

var initDiagonal;
var initFontSize;

ajoutImg.onclick = function () {
  //var moveDiv = document.createElement("div");
  //moveDiv.className = 'encadrer';
  //var titre = document.createElement("p");
  //var para = document.createElement("p");
  //titre.textContent = "Titre";
  //titre.className = 'centrerTitre';
  //moveDiv.appendChild(titre);
  //para.className = 'centrerPara';
  //moveDiv.appendChild(para);
  
  var name = prompt("Texte de l'image :");
  var container = $('<div class="encadrer"><div class="inner"><p class="centrerTitre">Titre</p><p class="centrerPara">' + name + '</p></div></div>');
  
  $(bg).append(container);
  
    container
    .draggable({ containment: "parent" })
    .resizable({
      containment: "parent",
      handles: "all"
    });
};

.centrer {
   display: block;
   margin: auto;
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   height: 640px;
   width: 360px;
   background-color: #000000;
 }

.menu {
  border: 1px solid black;
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 2px;
  padding-bottom: 2px;
  float: left;
}

.encadrer {
  /*display: table-cell;
  vertical-align: middle;*/
  border: 1px solid white;
  position:absolute !important;
}

.centrerTitre {
  color: white;
  margin: auto;
  text-align: center;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
  padding-right: 10px;
}

.centrerPara {
  font-size: 16;
  color: white;
  margin: auto;
  text-align: center;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
  padding-right: 10px;
}

.inner {
  display: inline-block;
  vertical-align: middle;
  text-align:center;
  width:100%;
}

.encadrer:before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.css" rel="stylesheet" />

<div id="menu" class="menu">
    <h3>Ajouter des éléments</h3>
    <ul>
        <li><a id="ajoutImage" href="#" onclick="return false;">Image</a></li>
    </ul>
</div>
<div id="bg"></div>

Update

To get the content center inside the .encadrer you need to:

1. Wrap the content with div
2. Follow the tutorial go to: Vertically-> Is it inline or inline-* elements (like text or links)?-> Is it multiple lines? -> see the second demo. You can see the final result here