JQuery Resizable：如何使多个 div 独立调整大小

Question

我制作了一个简单的 Web 应用程序，它允许您将动态 div 添加到容器 div 中。

您可以在此处查看应用的外观：

调整大小之前

如您所见，当您点击左侧菜单中的“图片”链接时，会在黑色背景的 div 容器中添加一个新的 div。

通过这种方式添加的这些动态div可以通过jQuery使用jQuery ui draggable and resizable 方法进行拖动和调整大小。

可拖动功能效果很好，但不能调整大小。看起来 div 是依赖项，当您尝试调整它的大小时，它取决于其他动态 div 的大小。

这是我试图解释的插图：

调整大小后

如您所见，我尝试调整 div2 的大小，但是因为我先添加了 div1，所以 div1 也被调整了大小。

我想让所有 div 独立，这样即使它与另一个 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.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>

我不太会用sn-p系统但是你可以这样看代码:p

抱歉英文不好和变量名。

Answer 1

我对@9​​87654324@ 和js 做了一些更改来解决您的问题：

1. 将$(".encadrer") 替换为$(moveDiv)，因为您不想在每次用户添加图像时为所有 元素(.encadrer) 调用插件。
2. 主要问题是图像的position 是relative，我将其更改为absolut。
3. 我删除了display:table-cell 和vertical-align:middle。如果您想使图像居中，您应该按照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>

更新

要在.encadrer 中获取内容中心，您需要：

1. 用div包装内容
2. 按照tutorial 转到：垂直-> 是内联还是内联-* 元素（如文本或链接）？-> 是多行吗？ -> 参见第二个演示。可以看到最终结果here