jQuery UI Draggable与Bootstrap布局

Question

jQuery可拖动元素会进入Bootstrap样式的列（col-*）。例如，我有两个.row，每个都分为4列（使用col-md-3）。我试图将第一行列拖动到第二行可放置列上。但是，当我拖动“Drag #”元素时，它们总是在“droppable”元素下面。我无法在Bootstrap样式中使其正常工作。有人能解释为什么会发生这种情况并提供解决方案吗？Bootply示例：http://www.bootply.com/THBX5GJnCn

- CoderTR

---

我的猜测是，这个问题不是由z-index引起的？我能够将“拖动2”拖到“拖动1”的顶部，但不能反过来。这与响应式UI CSS样式有关吗？ - CoderTR

Answer 1

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

在此添加类似于以下内容： .ui-draggable-dragging { z-index: 10000!important } 这是可用的jsfiddle: http://www.bootply.com/P0Okde8ZmV 上述代码将解决问题。当然，我的10000值和! important只是为了向您展示解决方案。每次使用! important并不能得到解决情况的线索，这样做并不是很好看。

- Michał Kutra

---

是的，我尝试过这个方法，但是一旦我将手柄（不一定）放在“可放置”的元素上，可拖动的元素就会消失。在你的例子中，如果你将一个元素拖到可放置的位置，一旦你放下它，它就会消失。 - CoderTR

请检查这个链接 http://www.bootply.com/ORKO1x7JNj - 我已经给 .ui-draggable 选择器添加了另一个 z-index。 - Michał Kutra

抱歉回复晚了，是的，它似乎正常运行。但我想知道为什么会发生这种情况，或者有没有人在不使用!important;的情况下修复了它。暂时接受答案。谢谢。 - CoderTR