在带圆角的 div 中创建可拖动对象

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 拖动？

Answer 1

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

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