使用 jQuery 可拖动时，为什么我的 div 没有对齐所有边？

Question

我正在尝试让这些子 div 在父 DIV 内部的所有侧面对齐，但它们仅与内部和内部的顶部和左侧对齐外部 div.

我认为我的代码类似于 jQuery 文档中的测试代码，除了在他们的代码中，可捕捉项目不是框架的子项，而在我的示例中，它们是 div 我想让他们捕捉到。

jQuery('.outer-icon-block').draggable({ snap: ".inner-box",snapMode:"both" });

.inner-box {
  
}

img {
  width:50px;
}

.outer-box {
    background-color: green;
    position: relative;
    width: 100%;
   height:600px;
  
}

#outer-box {
    box-shadow: 1px 1px 3px 2px #999999;
}

#manage-preview-inner {
    width: 480px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>

<div id="manage-preview-inner">
<div id="outer-box" class="outer-box">
<div class="inner-box">

<div class="outer-icon-block outer-block ui-draggable ui-draggable-handle">1<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f6/Emojione_1F613.svg/512px-Emojione_1F613.svg.png" style="outline: solid 1px white;"></div>

<div class="outer-icon-block outer-block ui-draggable ui-draggable-handle" style="position: relative;">2<img  src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f6/Emojione_1F613.svg/512px-Emojione_1F613.svg.png" style="outline: solid 1px white;"></div>

<div class="outer-icon-block outer-block ui-draggable ui-draggable-handle" style="position: relative;">3<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f6/Emojione_1F613.svg/512px-Emojione_1F613.svg.png" style="outline: solid 1px white"></div>

</div>
</div>
</div>

Answer 1

您的代码片段与 jquery-ui 示例之间的区别在于可拖动对象具有明确的高度+宽度。

将此添加到您的代码段可以使其正常工作（边框只是为了看到它发生）

.outer-icon-block { width:60px; height:50px; border: 1px solid red; }

请注意，您的 green 框与 inner-box 框的大小不同，因此我在对齐的 div 上添加了一个边框，以便您可以看到它在职的;它已经快到底部了，只是不在右边。

jQuery('.outer-icon-block').draggable({ snap: ".inner-box",snapMode:"both" });

.inner-box {
  border:10px solid blue;
}

img {
  width:50px;
}

.outer-icon-block { width:60px; height:50px; border: 1px solid red; }

.outer-box {
    background-color: green;
    position: relative;
    width: 100%;
   height:600px;  
}

#outer-box {
    box-shadow: 1px 1px 3px 2px #999999;
}

#manage-preview-inner {
    width: 480px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>

<div id="manage-preview-inner">
<div id="outer-box" class="outer-box">
<div class="inner-box">

<div class="outer-icon-block outer-block ui-draggable ui-draggable-handle">1<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f6/Emojione_1F613.svg/512px-Emojione_1F613.svg.png" style="outline: solid 1px white;"></div>

<div class="outer-icon-block outer-block ui-draggable ui-draggable-handle" style="position: relative;">2<img  src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f6/Emojione_1F613.svg/512px-Emojione_1F613.svg.png" style="outline: solid 1px white;"></div>

<div class="outer-icon-block outer-block ui-draggable ui-draggable-handle" style="position: relative;">3<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f6/Emojione_1F613.svg/512px-Emojione_1F613.svg.png" style="outline: solid 1px white"></div>

</div>
</div>
</div>

使用 jQuery 可拖动时，为什么我的 div 没有对齐所有边？

When using jQuery draggable, why are my divs not snapping to all sides?

jquery-ui

jquery-ui-draggable