CODEWITHSUNDEEP
javascriptjqueryjquery-ui
user4587067
user4587067

Reputation:

Set top position to draggable child inside draggable parent

I have a nested draggable elements. My Fiddle is here.

What I want is to set the top limit of the draggable child element so that the child element never overlaps the parent heading.

I contained it within the parent but not be able to set the top position so that it won't drag to the parent heading.

 _________________________
|_Parent__________________|   <------- Don't overlap the containing parent heading
|                         |
|     ___________         |
|    |_Child_____|        |        
|    |           |        |
|    |           |        |
|    |           |        |
|    |___________|        |
|_________________________|

HTML:

<div id="wrapper">
    <div id="Parent">
         <h4 class="ui-widget-header">Parent</h4>

        <div id="Child">
             <h4 class="ui-widget-header">Child</h4>

        </div>
    </div>
</div>

CSS:

#wrapper {
    width: 800px;
    height: 800px;
    background: Yellow;
}
#Parent {
    width: 250px;
    height: 250px;
    background: grey;
    top: 100px;
    left: 100px;
}
#Child {
    width: 100px;
    height: 100px;
    background: white;
    top: 0px;
    left: 50px;
}

Script:

 $(function () {
     $('#Parent').draggable({
         cursor: 'move',
         containment: 'parent'
     });

     $("#Child").draggable({
         cursor: 'move',
         containment: 'parent'
     });
 });

Upvotes: 3

Views: 2108

Answers (2)

user4588310
user4588310

Reputation:

Try to set the limit while you are dragging by using the following code. Just try to reset the top position of your draggable child by calling the method when on event drag in $("#Child").draggable({}). For you current scenario top: -20 is suitable but if you have a bigger header in your parent draggable, then set the value accordingly.

drag: function (event, ui) {
     var divPos = ui.position.top;
     if (divPos < -20) {

         ui.position.top = -20;

     }
}

Here is working JSFiddle.

Given below is embedded snippet of your code.

 $(function() {
   $('#Parent').draggable({
     cursor: 'move',
     containment: 'parent'
   });

   $("#Child").draggable({
     cursor: 'move',
     containment: 'parent',
     drag: function(event, ui) {

       var divPos = ui.position.top;
       if (divPos < -20) {

         ui.position.top = -20;

       }
     }
   });
 });
#wrapper {
  width: 800px;
  height: 800px;
  background: Yellow;
}
#Parent {
  width: 250px;
  height: 250px;
  background: grey;
  top: 100px;
  left: 100px;
}
#Child {
  width: 100px;
  height: 100px;
  background: white;
  top: 0px;
  left: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
<link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<div id="wrapper">
  <div id="Parent">
    <h4 class="ui-widget-header">Parent</h4>

    <div id="Child">
      <h4 class="ui-widget-header">Child</h4>

    </div>
  </div>
</div>

Upvotes: 3

Vidiya Prasanth Pappannan
Vidiya Prasanth Pappannan

Reputation: 723

You need to create a Containment wrapper to contain the movement. source: http://jqueryui.com/draggable/#constrain-movement

For your specific problem:

Add this to the CSS

 #containment-wrapper { width: 100%; height:90%; position:relative; top:-20px;}

Change your HTML like this:

<div id="wrapper">
    <div id="Parent">
        <h4 class="ui-widget-header">Parent</h4>
        <div id="containment-wrapper">
          <div id="Child">
             <h4 class="ui-widget-header">Child</h4>
          </div>
        </div>
    </div>
</div>

js changes:

$(function () {
     $('#Parent').draggable({
         cursor: 'move',
         containment: 'parent'
     });

     $("#Child").draggable({
         cursor: 'move',
         containment: '#containment-wrapper',
         scroll: false 
     });
 });

Hope it helps

Upvotes: 0

Related Questions