带有 Bootstrap 布局的 jQuery UI Draggable答案

【问题标题】：jQuery UI Draggable with Bootstrap layout带有 Bootstrap 布局的 jQuery UI Draggable
【发布时间】：2015-02-22 21:43:48
【问题描述】：

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

但是当我拖动“Drag #”元素时，它们总是位于“droppable”元素下方。我无法使用 Bootstrap 样式。

有人可以解释为什么会发生这种情况并提供解决方案吗？

【问题讨论】：

我的猜测是，不是 z-index 导致了这个问题？我可以将“Drag 2”拖动到“Drag 1”之上，但不能以其他方式拖动。与响应式 UI CSS 样式有关吗？

【解决方案1】：

似乎.ui-draggable-dragging 类的 `z-index' 属性低于其他类

像这里这样添加：

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

上面的代码可以解决这个问题。当然，我的 10000 价值和 !important 在这里只是为了向您展示解决方案。每次都用 !important 不是很漂亮，你无法得到 case 的线索 :)

【讨论】：