Установить верхнее положение для перетаскиваемого ребенка внутри перетаскиваемого родителя

Question

У меня есть вложенные элементы, которые можно перетаскивать. My Fiddle is here.

Я хочу установить верхний предел перетаскиваемого дочернего элемента, чтобы дочерний элемент никогда не перекрывал родительский заголовок.

Я содержал его внутри родителя, но не мог установить верхнее положение, чтобы оно не перетаскивалось к родительскому заголовку.

_________________________ 
|_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; 
} 

Сценарий:

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

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

Answer 1

Попробуйте установить предел во время перетаскивания с помощью следующего кода. Просто попробуйте сбросить top position вашего перетаскиваемого ребенка, вызвав метод, когда на event drag в $("#Child").draggable({}). Для вас подходит текущий сценарий top: -20, но если у вас есть большой заголовок в вашем родительском перетаскиваемом, то установите значение соответствующим образом.

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

     ui.position.top = -20; 

    } 
} 

Here is working JSFiddle.

---

Ниже встроен фрагмент кода.

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

Answer 2

Вам необходимо создать оболочку Containment, которая будет содержать движение. источник: http://jqueryui.com/draggable/#constrain-movement

Для конкретной задачи:

Добавьте к этому CSS

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

Изменить HTML как это:

<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 изменения:

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

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

Надеюсь, это поможет