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越过边界,我们将对其进行重置。

参见小提琴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 - 查看源时,附加数据似乎未包含在标记中

javascript - jQuery UI:未捕获的TypeError:无法读取未定义的属性'nodeType'

jquery - “未捕获的TypeError:无法在'Window'上执行'getComputedStyle':当gmap添加时,参数1的类型不是'Element'.Tq ​​@ VM107:37mF

c# - UWP将 child 转移到其他 parent 问题

python - 如何将 parent 与子女彼此联系起来?

java - 获取TreeMap中给定节点的所有子级

javascript - jQuery:在转义键上保存和还原部分dom

javascript - 通过选择制表键不改变按钮的背景色

javascript - 点击事件中的回调

javascript - JavaScript行之间保持什么状态?