问题
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.com/THBX5GJnCn
回答1:
Is 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.com/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 :)
来源：https://stackoverflow.com/questions/27642553/jquery-ui-draggable-with-bootstrap-layout