可拖动和可丢弃的z索引问题
draggable and droppable z-index issue
我使用拖放jquery ui来创建表单输入,但z索引出现问题,因为拖动元素时元素在右侧div后面,但在拖放后它是可见的。那么,如何修复这个问题,使元素在拖动时在右侧div上可见
JSFIDDLE
在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;
}
该问题与z-index
属性无关。看到这种行为的原因是在容器#trash
和#main
元素上设置了overflow: hidden
。
如果希望能够将元素从容器元素中拖出来,则overflow
属性应设置为visible
(默认值)。因此,您可以简单地删除overflow: hidden
。
更新示例
顺便说一句,我在元素中添加了box-sizing: border-box
,以便在它们的宽度/高度计算中包括padding
/border
。我相信您添加overflow: hidden
可能是为了防止元素扩展到其父元素之外。通过添加box-sizing: border-box
,并赋予元素100%
的宽度,可以解决这一问题。
相关文章:
- 使用scrollmagic时出现z索引问题
- Javascript中的多维数组排序索引问题
- 奇怪的索引问题
- Rails AJAX 销毁 - 重新渲染索引问题
- NamedNodeMap对象内部的Attr对象索引问题
- jQuery淡入淡出元素的Z索引问题
- z索引问题2
- 可拖动和可丢弃的z索引问题
- Javascript循环索引问题
- Jscrollpane z索引问题
- Lawnchair索引问题
- @{{#each}}内部的索引问题
- javascript/css转换+谷歌chrome的z索引问题
- 自定义选择框的表索引问题
- 非稀疏数组中的数组索引问题
- 删除一个项目,索引问题…
- javascript查找索引问题与IE
- 通过ajax发送多维数组,索引[0]问题
- 未定义的索引问题和错误返回
- select2的表索引问题