具有Bootstrap布局的jQuery UI Draggable [英] jQuery UI Draggable with Bootstrap layout

问题描述

jQuery可拖动元素位于引导样式列(col- *)下.例如，我有两个.row，每个都分为4列(带有col-md-3).我试图使第一行列可拖动到第二行可放置列上.

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.

但是，当我拖动拖动#"元素时，它们总是位于可放下"元素下方.我无法使用Bootstrap样式.

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示例: http://www.bootply.com/THBX5GJnCn

Bootply Exmple: http://www.bootply.com/THBX5GJnCn

推荐答案

似乎类.ui-draggable-dragging具有比其他类更低的"z-index"属性

Is seems that class .ui-draggable-dragging has lower `z-index' property than others

在此处添加某物:

.ui-draggable-dragging { z-index: 10000!important }

.ui-draggable-dragging { z-index: 10000!important }

这是工作的jsfiddle: http://www.bootply.com/P0Okde8ZmV

Here is jsfiddle which works: http://www.bootply.com/P0Okde8ZmV

上面的代码将解决此问题.当然是我的10000值&重要在这里只是为了向您展示解决方案.每次使用！important都不太好，您无法了解案例的线索:)

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

这篇关于具有Bootstrap布局的jQuery UI Draggable的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！