I am trying to get these child divs to snap on all sides to the inside of the parent DIV, but they are only snapping with the top and left sides of the inner and outer div.
I think my code is similar to the test code in the jQuery docs, except that in their code the snappable items are not children of the frame whereas in my example, they are children of the div I want them to snap to.
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>CodePudding user response：
The difference between your snippet and the jquery-ui example is that the draggables have an explicit height width.
Adding this to your snippet makes it work fine (border just to see it happening)
.outer-icon-block { width:60px; height:50px; border: 1px solid red; }
Note that your green box is not the same size as the inner-box so I've added a border to the div that's being snapped-to so you can see it working; it was already snapping to the bottom, just not to the right.
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>