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

Question

我想阻止更大的div被拖出较小的div，就像facebook使用它的个人资料图片一样。 有没有人知道我将如何做到这一点？

一切顺利，劳伦斯

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

draggable_outside

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

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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

＆＃13;

＆＃13;

＆＃13;

Answer 1

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

查看小提琴here

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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

＆＃13;

＆＃13;

＆＃13;