可拖放的 z-index 问题答案

【问题标题】：draggable and droppable z-index issue可拖放的 z-index 问题
【发布时间】：2015-12-31 21:06:07
【问题描述】：

我正在使用拖放 jquery ui 来创建表单输入，但是当拖动元素位于右侧 div 后面但拖放后它可见时，z-index 存在问题。那么如何解决这个问题以使元素在拖动时在右侧 div 上可见

在 JS 中

$('#main1 div').draggable({
  cursor: 'pointer',
  connectWith: '.dropme2',
  helper: 'clone',
  zIndex: 10
});

$('.dropme2 form').sortable({
  connectWith: '.dropme',
  cursor: 'pointer',
  zIndex: 1000
});

HTML

<div class="dropme" id="main1">
  <div id="ytvid">YouTube video</div>
  <div id="paragraph">Paragraph</div>
</div>

<div class="dropme2" id="trash">
  <form id="form" style="width: 100%; min-height: 100px; float: left; padding-bottom: 40px; 
    position: relative; z-index: 2;">
    <input type="submit" id="getids" value="save" style="position: absolute; bottom: 0; left: 48%;" />
  </form>

</div>

CSS

#trash,
#main1 {
  display: inline-block;
  width: 250px;
  min-height: 100px;
  overflow: hidden;
  float: left;
  margin-right: 30px;
  background: rgb(236, 237, 240);
}
#trash {
  width: 300px;
  float: right;
  position: relative;
  z-index: 1;
}
#main1 {
  float: none;
  position: fixed;
  top: 30px;
  left: 30px;
  z-index: 9;
}
#main1 div {
  list-style: none;
  margin-bottom: 2px;
  background-color: #7F7F87;
  padding-left: 30px;
  width: 230px;
  cursor: -webkit-grab;
  color: #fff;
  font-size: 18px;
  height: 40px;
  line-height: 40px;
  float: left;
  position: relative;
  z-index: 10;
}
#trash form > div {
  height: auto;
  width: 97%;
  margin-bottom: 2px;
  background-color: #7F7F87;
  padding-left: 30px;
  cursor: -webkit-grab;
  color: #fff;
  font-size: 18px;
  line-height: 40px;
  position: relative;
  z-index: 10;
}
.highlight {
  padding: 5px;
  border: 2px dotted #fff09f;
  background: #fffef5;
}

【问题讨论】：

标签： javascript html css jquery-ui drag-and-drop

【解决方案1】：

该问题与z-index 属性无关。您看到此行为的原因是您在容器 #trash 和 #main 元素上设置了 overflow: hidden。

如果您希望能够将元素拖出容器元素，则应将overflow 属性设置为visible（默认值）。因此，您可以简单地删除overflow: hidden。

Updated Example

作为旁注，我在元素中添加了box-sizing: border-box，以便在它们的宽度/高度计算中包含padding/border。我相信您可能添加了overflow: hidden 以防止元素扩展到其父元素之外。通过添加box-sizing: border-box，并为元素提供100% 的宽度，即可解决此问题。

【讨论】：