在较小的父 div 中包含一个大的可拖动子 div答案

【问题标题】：Contain a large draggable child div inside smaller parent div在较小的父 div 中包含一个大的可拖动子 div
【发布时间】：2017-09-18 13:02:07
【问题描述】：

我想防止较大的 div 被拖出较小的 div，就像 facebook 对其个人资料图片所做的那样。有人知道我将如何去做吗？

劳伦斯，一切顺利

在下面的链接中，我举了一个例子来说明我的意思。

draggable_outside

PS：对不起，我没有让 JS 部分在代码 sn-p 中工作，这是我的第一篇文章。我把它写成 HTML 部分的脚本。

.wrapper {
  width: 400px;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.parent {
  background: gray;
  display: block;
  width: 100px;
  height: 100px;
}

.child {
  position: absolute;
  width: 200px;
  height: 200px;
  display: block;
  background: blue;
  opacity: 0.5;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<script type="text/javascript">
  $(document).ready(function(){
    $('.child').draggable();
  });
</script>

<div class="wrapper">
  <div class="parent">
    <div class="child">
    </div>
  </div>
</div

【问题讨论】：

标签： javascript jquery parent-child draggable containment

【解决方案1】：

您可以使用 jQuery draggable 函数如下。在拖动事件中，如果 x 和 y 越过边界，我们将重置它们。

见小提琴here

.wrapper {
  width: 400px;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.parent {
  background: gray;
  display: block;
  width: 100px;
  height: 100px;
}

.child {
  position: absolute;
  width: 200px;
  height: 200px;
  display: block;
  background: blue;
  opacity: 0.5;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<script type="text/javascript">
 
 $(document).ready(function(){
  
     $('.child').draggable(
    {
         
        drag: function(event, ui) {
             var offset = $(this).offset();
            var xPos = offset.left;
            var yPos = offset.top;
            $('#posX').text('x: ' + xPos);
            $('#posY').text('y: ' + yPos);
         //   console.log(xPos);
        //     console.log(yPos);
      if(ui.position.left>250) 
      { 
        ui.position.left=250;
      }
      if(ui.position.left<-40) 
      { 
        ui.position.left=-40;
      }
       if(ui.position.top<-90) 
       { 
       ui.position.top=-90;
      } 
      
     if(ui.position.top>200) 
     { 
      ui.position.top=200;
     }
   
  }
  });

  });
   
    
    
    
   
</script>
<div class="wrapper">
  <div class="parent">
    <div class="child">
    </div>
  </div>
</div

【讨论】：

这是您的预期输出吗？