JQueryUI 拖动一个包含图像的 div

Question

我遇到了一个奇怪的问题。我正在使用 JQueryUI 在包含标签的 div 周围拖动。当这些 div 静止时，img 完全位于 div 的中心(我希望它是这样)但是当我拖动它时，图像不再居中而是一直位于 div 的左侧。请注意，我正在拖动一个我添加到我的 html 正文中的助手。如果我不将它添加到 body 中，我就没有那个问题，但我根本不明白为什么如果我这样做了它就不起作用。我的 body 没有应该改变布局的 css，所以我有点困惑。这是父 div 的 CSS:

.draggable-stream{
vertical-align: top;
background-color: white;
display: inline-block;
height: 9vh;
width: 9vh;
margin-left: 4%;
margin-top: .5vh;
border-radius: 50%;
box-shadow: 1px 1px 2px #555;
}

对于包含的图像:

.draggable-img{
margin-top: 14%;
height: 6vh;
width: 6vh;
margin-bottom: 0;
}

当我用 Firebug 检查元素时，我可以看到在拖动时没有向辅助元素添加边距等，它与固定元素具有完全相同的值。最重要的是，如果我给 .draggable-img 一个边距，它对辅助元素和静止元素都有效，但由于静止元素 - 图像已经居中，它会移出中心，而辅助元素会居中.

哦，我正在使用 Bootstrap 和 JQueryUI css，但同样，根据 Firebug 的说法，这些样式不会与我自己的样式混淆。

Answer 1

这是因为 draggable 应该有绝对位置。这是必须的。

在可拖动类中试试这个。 Juzz 添加这个。

position:absolute；

这将解决它。

.draggable-img{ 
         position: absolute;
         margin-top: 14%; 
         height: 6vh; 
         width: 6vh; 
         margin-bottom: 0; 
  }