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

查看数据here