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

Question

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;
}

user_2181514 · Answer

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;
}

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

1 Answers