javascript - 在较小的父 div 内包含一个较大的可拖动子 div

标签 javascript jquery parent-child draggable containment

我想防止较大的 div 被拖出较小的 div,就像 facebook 对其个人资料图片所做的那样。 有谁知道我将如何做到这一点?

祝劳伦斯一切顺利

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

draggable_outside

PS:抱歉,我没有在代码片段中使用 JS 部分,这是我的第一篇文章。我在 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

最佳答案

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

参见 fiddle 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

关于javascript - 在较小的父 div 内包含一个较大的可拖动子 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46279977/

相关文章:

Angular 将 @Input 用于深度嵌套的组件

c - 如何通过管道将最后一个 child 的号码发送给 parent ?

javascript - 继续在 $scope.$watch 函数内获取 "TypeError: Cannot read property ' value' of null"

jquery - Firebug 中的 TypeError: $(...) is null 错误,但代码可以在 jsFiddle 上运行

jQuery Mobile + Flexslider - 回调后具有渐进式图像加载 AJAX 的幻灯片

javascript - 如何在页面之间传递输入 ="file"数据

parent-child - Elasticsearch 与父子文件的问题

javascript - 使用 fadeIn 无法正确显示 jQuery 文本

javascript - 使用 request() 和回调时,如何不在 Azure Function 中调用 context.done() 两次?

javascript - 检查类是否存在,否则将高度添加到 div