什么时候从父母家出来的农作物形象？

Question

我有一些问题，我试图写一个图像编辑器插件，在这段代码中我有2个div，如您所见。

​

该子div可以很好地拖动和调整大小，用户重新调整大小后，点击上传底部，将有关子div位置和精确大小的信息完美地发送到服务器。

而当子div从父div中拖出时，它将从父div中提取出来的图像的额外部分进行大量的裁剪。

​

这是我的html代码

<div id="output">
   <div class="wifix" width="100%">
      <div class="dadycool">
         <div class="child" align="center"></div>
       </div>
   </div>
</div>

css代码

div.wifix {
   height: 300px;
   width: 600px;
}
div.dadycool {
   width: 250px;
   height: 300px;
   overflow: hidden;
   outline: 1px dashed red;
   margin-top: 50px;
   position: relative;
   z-index: 100;
}
div.child {
   height: 400px;
   width: 500px;
   background: coral;
   left: -100px;
   right: 0;
   top: -50px;
   position: absolute;
   z-index: -1;
}

Answer 1

您可以在代码中使用containment，

这将限制您的子元素移出父元素。

例：

   $( ".child" ).draggable({ containment: ".dadycool" });

见数据这里