Question

我需要创建一个带有圆角的div，其中包含可以拖动的图像，但部分图像被div隐藏。

客户真的希望div成为一个圆圈，所以它有一个镜子效果，它们要求它至少在IE 8上工作，所以我想我会选择基于图像的圆角方法如下：

<div class="looking-glass-images">
    <span class="tl"></span><span class="tr"></span>
    <img src="http://canyoncreative.com/psc/wp-content/uploads/2011/11/CCDS_Ext_008a-copy.jpg" width="1250" height="980" class="active" />
    <img src="http://canyoncreative.com/psc/wp-content/uploads/2011/11/CCDS_Ext_011.jpg" width="967" height="1250" class="inactive" />
    <img src="http://canyoncreative.com/psc/wp-content/uploads/2011/11/CCDS_Ext_012.jpg" width="1250" height="962" class="inactive" />
    <img src="http://canyoncreative.com/psc/wp-content/uploads/2011/11/CCDS_Int_005.jpg" width="912" height="1250" class="inactive" />
    <img src="http://canyoncreative.com/psc/wp-content/uploads/2011/11/CCDS_Int_008.jpg" width="1250" height="833" class="inactive" />
    <span class="bl"></span><span class="br"></span>
</div>

CSS：

.looking-glass-images{

    -moz-border-radius:50%;
    overflow:hidden;
    height:500px;
    width:500px;
    position:relative;
}

.looking-glass-images img{
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    position:relative;
    top: -50%; left: -50%; bottom: -50%; right: -50%;
    z-index: -1;
}
.loking-glass-images .active{
    display:block;
}
.looking-glass-images .inactive{
    display:none;
}

.looking-glass-images > .tl, .looking-glass-images > .tr, .looking-glass-images > .bl, .looking-glass-images > .br{
    width: 250px;
    height:250px;
    position:absolute;
    background-image: url(build/css/ellipse.png);
    background-repeat: no-repeat;
    z-index: 1
}.looking-glass-images > .tl{
    background-position: top left;
    top: 0; left: 0;
}.looking-glass-images > .tr{
    background-position: top right;
    top: 0; left: 250px;
}.looking-glass-images > .bl{
    background-position: bottom left;
    top: 250px; left: 0;

}.looking-glass-images > .br{
    background-position: bottom right;
    top: 250px; left: 250px;
}

问题是，当我将jQuery可拖动效果应用于活动图像时，我无法移动它，因为它处于角落范围内。有没有办法在IE 8上做圆角，我也可以使用jQuery draggable with？

Answer 1

使父div可拖动，而不是图像。

$(".looking-glass-images").draggable();

在具有圆角的div内创建可拖动对象

1 个答案: