CODEWITHSUNDEEP
javascripthtmlcssjquery-uidrag-and-drop
PHP User
PHP User

Reputation: 2422

draggable and droppable z-index issue

I'm using drag and drop jquery ui to create form input but there's an issue with z-index while dragging the element is behind the right div but after dropping it's visible. So how to fix this to make elements visible on the right div while dragging

JSFIDDLE

in 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;
}

Upvotes: 3

Views: 3542

Answers (1)

Josh Crozier
Josh Crozier

Reputation: 240948

The issue isn't related to the z-index property. The reason you are seeing this behavior is because you have overflow: hidden set on the container #trash and #main elements.

The overflow property should be set to visible (the default) if you want to be able to drag the elements out of their container elements. Therefore you can simply remove overflow: hidden.

Updated Example

As a side note, I added box-sizing: border-box to the elements in order to include the padding/border in their width/height calculations. I believe you may have added overflow: hidden in order to prevent the elements from extending outside of their parent elements. By adding box-sizing: border-box, and giving the elements a width of 100%, this is resolved.

Upvotes: 5

Related Questions