将顶部位置设置为 draggable child inside draggable parent

Question

我有一个嵌套的可拖动元素。 My Fiddle is here.

我想要的是设置可拖动 child 元素的上限，以便 child 元素永远不会与 parent 标题重叠。

我将其包含在 parent 中，但无法设置顶部位置，因此它不会拖到 parent 标题。

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

您需要创建一个 Containment wrapper 来包含移动。来源：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 
     });
 });

希望对您有所帮助

Answer 2

尝试使用以下代码在拖动时设置限制。只需尝试通过在 $("#Child").draggable({}) 中的 event drag 上调用该方法来重置可拖动 child 的 top position。对于您当前的场景 top: -20 是合适的，但如果您的 parent 可拖动对象中有更大的 header，则相应地设置值。

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>

将顶部位置设置为 draggable child inside draggable parent

Set top position to draggable child inside draggable parent

javascript

jquery

jquery-ui