Создание перетаскиваемого объекта в 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();