jquery - 可使用掩码调整大小的 jQuery UI 问题

Question

所以我有一个可拖动和可调整大小的 div(这部分工作正常)需要被屏蔽，这样你在任何时候都只能看到 div 的特定部分。对于面具，我只是使用溢出:隐藏。我的问题是，连接到 .img-wrap 的调整大小处理程序隐藏在 mask 下方，我需要能够在 mask 时调整 .img-wrap 的大小。关于如何将它们置于面具之上的任何想法？您会在下面的 fiddle 中看到，您不能拖动 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/