Issue Description (Fiddle):
I am using the jQuery UI's .draggable() function to make the red element snap inside the blue container. However, it is snapping to one edge only instead of completely fitting inside (both edges). It requires further dragging until it snaps onto the other axis.
Is there a method to detect when the snap event initiates (the event fires) and then manually reposition the red box so that it fully fits within the container at any angle?
Sample Code:
HTML:
<div id="box"></div>
<div id="container"></div>
JavaScript:
$('#box').draggable({
snap: '#container',
snapMode: 'inner',
snapTolerance: 50
});
CSS:
#box {
background: red;
width: 100px;
height: 100px;
position: absolute;
z-index: 1;
}
#container {
width: 102px;
height: 102px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -51px;
margin-left: -51px;
border: 1px solid blue;
}