Question

我有一个奇怪的问题。我使用JQueryUI来拖动包含标记的div。当这些div是静止的时，img完全居中于div（我希望它如何）但是当我拖动它时，图像不再居中，而是一直到div的左边。记住，我拖动了一个帮助，我添加到我的html主体。如果我不把它添加到身体上，我就不会遇到这个问题，但是如果我这样做的话，我根本不知道为什么它不起作用。我的身体没有应该改变布局的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

这是因为可拖动的位置应该是绝对的。它必须。

在可拖动的课程中尝试此操作。 Juzz加上这个。

position:absolute;

这将解决它。

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

JQueryUI拖动包含图像的div

1 个答案: