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的{{3}}上调用该方法，即可尝试重置可拖动孩子的$("#Child").draggable({})。对于您来说，当前情况top: -20是合适的，但如果您的父目标中有更大的标题，则相应地设置该值。

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

         ui.position.top = -20;

     }
}

event drag

以下是代码的嵌入代码段。

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

您需要创建一个包含运动的包含包装器。来源：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 
     });
 });

希望有所帮助

将可拖动父级内的可拖动子项设置为最高位置

2 个答案: