How to restrict draggble element into particular element

I am new to JQuery UI, I am trying to restrict draggable element into particular elements which are present inside the container (.container).

Even I have tried with containment as array of values it is working but in my case I will be unaware of the .container height and width. Please suggest me which will the right approach to do this one.

<div class="container">
  <div class="restricted-field-1">should be restricted here</div>
  <div class="dragme">DRAG ME</div>
  <div class="restricted-field-2">should be restricted here</div>
</div>

$(".dragme").draggable({
    containment: ".container"
});

Thanks in advance.

JSFIDDLE



You can move the .container div to wrap .dragme, remove position: relative of .container and set following style changes.

body {
  position:relative;
}

Modify as follows.

.container {
    position: absolute;
    height: 362px;
}
.restricted-field-2 {
    top: 400px;
}

Here is the jsfiddle link.

Edited:

There are options in jquery draggable to set x-axis and y-axis positions for the containment and we need to calculate based on our requirement.

Here is the updated js fiddle link.