CODEWITHSUNDEEP
javascriptjquerycssjquery-ui
Kumar
Kumar

Reputation: 280

How to restrict draggable element into particular element

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

Upvotes: 1

Views: 1145

Answers (2)

kmg
kmg

Reputation: 519

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.

Upvotes: 1

kyun
kyun

Reputation: 10304

$(".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>

Upvotes: 0

Related Questions