将可拖动父元素内可拖动子元素的顶部位置设为固定值。

Question

我有一些嵌套的可拖动元素。 这是我的示例。

我想要设置可拖动子元素的顶部限制，以使子元素永远不会重叠到父标题上方。

我将其包含在父级中，但无法设置顶部位置，以使其无法拖动到父标题处。

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

- user4587067

---

你尝试过在“parent”的标题后面添加一个额外的容器吗？ - blgt

Answer 1

尝试使用以下代码在拖动时设置限制。只需在 $("#Child").draggable({}) 中调用方法并重置可拖动子元素的 top 位置，当在 event drag 上时。对于您目前的情况，top: -20 是适合的，但如果您的父级可拖动区域有更大的标题，则相应地设置值。

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

         ui.position.top = -20;

     }
}

这里是可用的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>

- user4588310

Answer 2

你需要创建一个包含器来限制移动。 来源：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 
     });
 });

希望能有所帮助

- Vidiya Prasanth Pappannan