我有一些问题 我尝试编写一个图像编辑器插件,在这段代码中我有 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;
}
最佳答案
您可以在代码中使用containment
,
这将限制您的子元素移出父元素。
例如:
$( ".child" ).draggable({ containment: ".dadycool" });
查看数据here
关于javascript - 从 parent div出来时如何裁剪图像?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23308788/