如何从父母div出来裁剪图像？

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" });

请参阅datails here