jquery-ui - 使用 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>

标签： jquery-uijquery-ui-draggable

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>