jQuery draggable elements goes under the bootstrap styled columns (col-*). For example, I have two .row each divided into 4 columns (with col-md-3). I am trying to get the first row columns to be draggable onto 2nd row droppable columns.
But when I drag 'Drag #' elements, they always go under the 'droppable' elements. I am not able to get drop working with Bootstrap styles.
Can someone explain why this is happening and provide a solution?
Bootply Exmple:
jQuery draggable elements goes under the bootstrap styled columns (col-*). For example, I have two .row each divided into 4 columns (with col-md-3). I am trying to get the first row columns to be draggable onto 2nd row droppable columns.
But when I drag 'Drag #' elements, they always go under the 'droppable' elements. I am not able to get drop working with Bootstrap styles.
Can someone explain why this is happening and provide a solution?
Bootply Exmple: http://www.bootply./THBX5GJnCn
Share Improve this question asked Dec 24, 2014 at 22:09 CoderTRCoderTR 5003 gold badges7 silver badges19 bronze badges 1- My guess is, its something other than z-index causing this problem? I am able to drag 'Drag 2' on top of 'Drag 1' but not other ways. Something to do with responsive UI CSS styles? – CoderTR Commented Dec 24, 2014 at 23:51
1 Answer
Reset to default 2Is seems that class .ui-draggable-dragging has lower `z-index' property than others
Adding sth like here:
.ui-draggable-dragging {
z-index: 10000!important
}
Here is jsfiddle which works: http://www.bootply./P0Okde8ZmV
Code above will fix the problem. Of course my 10000 value & !important are here just to show You solution. It's not so pretty to use !important each time, You can't get the clue of case :)