Jquery draggable - 是否可以拖过边距？

Question

我在一个 div(父)中有一个 div(子)。我使用 margin: auto; 将子 div 居中。我使用 JQuery 的可拖动功能通过 containment: "parent" 使子 div 可拖动。但是，由于我将边距设置为自动，因此我不会向左或向右拖动子 div。无论如何允许拖动以避免边距？

HTML:

<div class="parent">
    <div class="child"></div>
</div>

CSS:

.parent {
    background-color: orange;
    position: relative;
    left: 0px;
    top: 0px;
    height : 300px;
    width: 300px;
}
.child {
    background-color: green;
    position: relative;
    height : 100px;
    width: 100px;
    top: 50%;
    transform: translateY(-50%);
    margin: auto;
}

Javascript/JQuery:

$(".child")
    .draggable({
    containment: "parent",
    cursor: "move"
});

这是我的 jsfiddle .

我试图在拖动开始时将边距设置为 0，但它看起来很丑陋。这是 jsfiddle为此。

Answer 1

为了改进 Abdul 的回答，当您为子框添加边距时，它实际上具有不可见的边，填充了子框左右两侧与父框左右两侧之间的空间。所以从技术上讲，你是在四处移动它，只是没有空间让它左右移动。

要解决此问题，请移除子项的边距并使用与垂直居中相同的技术将其水平居中:

top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);