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>

    containment: ".container"

Thanks in advance.


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

body {

Modify as follows.

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

Here is the jsfiddle link.


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.