How to restrict draggable element into particular element

Question

In 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"
});

JSFIDDLE

Are you trying to limit the dragging within the white background area? — kmg, Aug 16 '17 at 06:22
This post might be helpful: https://stackoverflow.com/questions/11452185/restrict-jquery-draggable-items-from-overlapping-colliding-with-sibling-elements — Pierre Berton, Aug 16 '17 at 06:25
This post might be helpful: https://stackoverflow.com/questions/11452185/restrict-jquery-draggable-items-from-overlapping-colliding-with-sibling-elements — Pierre Berton, Aug 16 '17 at 06:27
Thank you for reply yes I'm trying to limit within the white background area @karthika — Kumar, Aug 16 '17 at 06:48

kmg · Answer 1 · 2017-08-16T10:30:11.507

1

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.

edited Aug 16 '17 at 10:30

answered Aug 16 '17 at 07:43

kmg

499
3
16

Yes this will work but actually I need to do changes in jquery ui side(scripting side). Thank you – Kumar Aug 16 '17 at 09:10
I have added updated js fiddle link with changes in scripting side alone as you mentioned. Hope that helps. – kmg Aug 16 '17 at 10:32
Yes this works, but the thing is here I don't know the exact height and width of container and restricted elements. Thank you – Kumar Aug 16 '17 at 10:50
You can calculate the width and height using width() and height(). Fiddle link here: https://jsfiddle.net/v28r9v3r/12/ – kmg Aug 16 '17 at 11:02

score 0 · Answer 2 · answered Aug 16 '17 at 06:25

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

.container{
  position:relative;
  width: 500px;
  height: 400px;
  background: #FFF;
}

.dragme{
  width: 100px;
  cursor: move;
  background: black;  
  color:white;
  text-align:center;
}
.restricted-field-1{
  width:480px;
  background: silver;
  padding:10px;
  user-select:none;
  height: 20px;
}
.restricted-field-2{
  position:absolute;
  width:480px;
  bottom:0;  
  padding:10px;
  background: silver; 
  user-select:none;
  height:20px;

  
}
.mini{
  position: absolute;
  top: 40px;
  left: 0px;
  bottom: 40px;
  
  width: 100%;

  
 }

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

<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>

Thank you for reply, actually I don't have to create new element inside the container. — Kumar, Aug 16 '17 at 06:54

How to restrict draggable element into particular element

2 Answers2