JQuery UI Draggable with Bootstrap layout
JQuery draggable elements come in bootstrap columns (col- *). For example, I have two .row
, each divided into 4 columns (c col-md-3
). I am trying to move the columns of the first row to the dragged columns of the second row.
But when I drag the "Drag #" elements, they always go under the "droppable" elements. I can't seem to work with Bootstrap styles.
Can someone explain why this is happening and provide a solution?
Example: http://www.bootply.com/THBX5GJnCn
source to share
The class seems to .ui-draggable-dragging
have a lower z-index property than others
Adding sth like here:
.ui-draggable-dragging {
z-index: 10000!important
}
Here is a jsfiddle that works: http://www.bootply.com/P0Okde8ZmV
The above code will fix the problem. Of course my value is 10000 and! The important thing here is to show you the solution. It's not that fun to use! It is important every time, you cannot understand the essence of the matter :)
source to share