Question

所以我有一个可拖动且可调整大小的div（这部分工作正常）需要被屏蔽，所以你只能随时看到div的某个部分。对于面具，我只是使用overflow：hidden。我的问题是，连接到.img-wrap的调整大小处理程序隐藏在掩码下面，我需要能够在屏蔽它时调整大小.img-wrap。关于如何让它们超越面具的任何想法？您将在下面的小提琴中看到，除非它们可以查看，否则您无法拖动div的边缘。

使用JSFiddle更新：http://jsfiddle.net/yv332/

更新＃2：我曾考虑使用元素之外的自定义句柄，但显然它们必须是可调整大小元素的子元素。

HTML：

<div id="product">
    <div class="img-wrap" style="background-image: url(someImage); width: 469px; height: 469px;"></div>
</div>

CSS：

#product {
display: inline-block;
overflow: hidden;
position: fixed;
right: 300px;
top: 100px;
z-index: 1;
width: 235px;
height: 469px;
}
.img-wrap {
    background-size: cover;
    cursor: move;
}

JS：

$("#product .img-wrap").resizable({
    handles: "ne, nw, se, sw",
    aspectRatio: $("#product .img-wrap").width() / $("#product .img-wrap").height()
}).draggable({

});

Answer 1

使用其他掩码，您可以在其上设置pointer-events:none; CSS属性并获取您要查找的内容。

HTML：

<div id="product">
    <div class="my-mask left"></div>
    <div class="img-wrap" style="background-image: url(http://scontent-a.cdninstagram.com/hphotos-xpf1/t51.2885-15/10544275_544597625641458_1507697866_n.jpg); width: 469px; height: 469px;"></div>
    <div class="my-mask right"></div>
</div>

CSS：

#product {
    display: inline-block;
    overflow: hidden;
    position: fixed;
    z-index: 1;
    width: 100%;
    height: 469px;
}
.img-wrap {
    background-size: cover;
    cursor: move;
}
.my-mask {
    height:100%;
    width:25%;
    position:absolute;
    top:0px;
    background-color:red;
    pointer-events:none;
    z-index:2
}
.left {
    left:0px;
}
.right {
    right:0px;
}

演示：http://jsfiddle.net/robschmuecker/2x2LB/

使用掩码调整jQuery UI的问题

1 个答案: