JQuery UI Draggable With Bootstrap Layout

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 ro

Solution 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 :)